JS Simulation bootstrap Drop-down Menu Effect Example _javascript skills

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.