JS Simulation bootstrap Drop-down Menu Effect Example _javascript skills

Source: Internet
Author: User
Tags button type

This paper illustrates the effect of JS simulation bootstrap pull-down menu. Share to everyone for your reference, specific as follows:

Simulate Bootstrap pull-down Menu

In the work to cut an effect: Click on the navigation bar, the following menu appears, but when you click on other places, hide the submenu, the effect is somewhat similar to the bootstrap "pull-down menu"

Because the style of the Bootstrap submenu is different from the design, you need to write a similar effect yourself

When you click on a control, it displays a drop-down menu, but how do you keep it hidden when you click on a blank space?

At first the idea of the body binding a onclick event, when the click of a blank place due to event bubbling, triggering click Body Event, but the problem comes, click on the control, the same will trigger the body click event, resulting in a drop-down menu showing out, there has been shrunk back, So that's not the right idea.

Since Bootstrap has already implemented this feature, look at its source code and find a solution:
Bind the event to the document (hide its submenu) and prevent it from bubbling when the control's method is triggered, so that it does not trigger the binding

<!--filter navigation bar--> <div class= "border_b_bottom_3eee text-center width_40 Active" Float_left "style="
  ;
      <div class= "Margin_bottom_10 margin_top_10" > <span onclick= "Showorhideitem (this,event)" class= "title" > Category <span class= "caret" ></span> </span> <ul class= "list-unstyled all_width Sqh_absol Ute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee sqh_position_top_100 sqh_position_left_0 " data-show= "Hide" style= "z-index:999;" > <li class= "margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick= "JumpTo (This)" target= "H Ttps://www.baidu.com "> <span class=" Float_left "> Domestic </span> <span class=" float_right icon
      Iconfont sqh_line_height_15 "></span> <span class=" Clearfix "></span> </li> <li class= "margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick= "JumpTo" (This) "target=" https://www.baidu.com "> <span class=" float_left "> Vegetables </span> <span class=" float_right icon icon Font sqh_line_height_15 "></span> <span class=" Clearfix "></span> </li> < Li class= "margin_left_10 margin_right_10 sqh_pointer sqh_font_color_red" onclick= "Jumpto" (This) "target=" https:// Www.baidu.com "> <span class=" float_left "> Snack </span> <span class=" float_right icon Iconfon T sqh_line_height_15 "></span> <span class=" Clearfix "></span> </li> &LT;/UL&G
  T </div> </div> <div class= "Text-center border_b_bottom_3eee width_40 float_left" > <div class= " Margin_bottom_10 margin_top_10 border_b_right_eee "> <span onclick=" Showorhideitem (this,event) "class=" title "&
      Gt Category <span class= "caret" ></span> </span> <ul class= "list-unstyled all_width Sqh_absolute Sqh_line_height_25 Sqh_tmp_Bj_ff border_b_bottom_eee "data-show=" Hide "style=" Top:100%;left:0px;z-index:999;display:none "> <li class=" Margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee "onclick=" Jumpto (This) "target=" https:// Www.baidu.com "> <span class=" float_left "> Home Economics 1</span> <span class=" float_right icon Iconfo  NT Sqh_line_height_15 "></span> <span class=" Clearfix "></span> </li> <li class= "Margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee sqh_font_color_red" onclick= "JumpTo (This)" target= "https://www.baidu.com" > <span class= "float_left" > Vegetable 1</span> <span "class=" ight icon Iconfont sqh_line_height_15 "></span> <span class=" Clearfix "></span> </li&
      Gt
        <li class= "margin_left_10 margin_right_10 sqh_pointer" onclick= "Jumpto (This)" target= "https://www.baidu.com" > <span class= "Float_left" > Snack 1</span> <span class= "float_right icon iconfont sqh_line_height_15" ></span> <span class = "Clearfix" ></span> </li> </ul> </div> </div> <div class= "Text-right Borde R_b_bottom_3eee text-center width_20 float_left "> <div class=" margin_bottom_10 margin_top_10 "onclick=" Showsearch (this,event) "> <span class=" icon iconfont font_14 display_block padding_left_5 "></span> &L T;/div> <!--display search box--> <div class= "sqh_tmp_bj_ff" > <div class= "Sqh_absolute sqh_line_height_25 Sqh_tmp_bj_ff Search_cont "style=" Top:58%;right:0px;z-index:999;display:none; "data-search=" Hide "> <div cla ss= "Margin_left_15" > <div class= "sqh_relative" style= "margin-right:80px"; > <span class= "icon iconfont font_14 sqh_absolute padding_left_5" style= "left:0px;top:0px;" ></span> <input class= "In_search all_width padding_left_30Sqh_tmp_bj_f3 sqh_border_radius_20 "placeholder=" search "onclick=" stopevent (this,event) "type=" text "value=" "> < /div> <div class= "float_right" style= "width:80px"; > <button type= "button" class= "btn btn-e4005a" style= "padding:4px 12px;"
> Search </button> </div> </div> </div> </div> </div> <script>
    $ (function () {//To document binding event $ (document). On ("click", Function () {///find control is UL and contains property data-show= "show" control, if any, let it hide
  $ ("ul[data-show= ' show ']"). Slideup ("slow");
  });
    $ (document). On ("click", Function () {////Find the control is a div and contain the property data-show= ' show ' and, if so, modify its CSS properties.
  $ ("Div[data-search= ' show ']"). CSS ("display", "none"). CSS ("width", "32%");
});
});
  Displays or closes the filter condition function Showorhideitem (obj,event) {//alert (Arguments.callee);//alert (Showorhideitem.caller);
  var $currentObj = $ (obj);
  Hide all Drop-down list $ ("ul[data-show= ' show ']"). Hide (); Clears all active classes $currentObj. Closest (". Row"). Find ("Div.active").Removeclass ("active"); Adds a selected style to the current Div $currentObj. Closest (". Float_left"). AddClass ("active") var $ul = $currentObj. Closest ("div"). Find ("UL"
  );
    UL is the expanded state if ($ul. Data ("show") = = "Show") {$ul. Slideup ("slow");
  $ul. attr ("Data-show", "Hide");
    }else{//ul is the expanded state $ul. Slidedown ("slow");
    $ul. attr ("Data-show", "show");
  Block event bubbling event.stoppropagation (); }//Show search box function Showsearch (obj,event) {var $currentObj = $ (obj). Closest (". Float_left"). Find (". Search_cont"). CSS ("
  Display "," block ");
  $currentObj. Animate ({width: "100%"}, 1000);
  $CURRENTOBJ. attr ("Data-search", "show");
Block event bubbling event.stoppropagation ();

 function Stopevent (obj,event) {//block event bubbling event.stoppropagation ();} </script>

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.