JS simulates an bootstrap drop down menu effect example

This article gives an example of how JS simulates the bootstrap drop-down menu.Share it for your reference, as follows:

Simulate bootstrap drop-down menu

To cut an effect at work: Click on the navigation bar, the following menu appears, but when you click somewhere else, the submenu is hidden, a little like bootstrap's Drop-down Menu

Since bootstrap's submenus are not designed in the same style, you need to write a similar effect yourself

A drop-down menu appears when you click on a control, but how can you hide it automatically when you click on a blank place?

The original idea was to bind an onclick event to body. When you click on a blank place and the event bubbles, it triggers the click body event, but the problem arises. When you click on a control, it also triggers the click event for body, causing the drop-down menu to appear and then shrink back, so this idea is incorrect.

Since bootstrap has already implemented this function, look at its source code and find a solution:
Bind an event to document (hide its sub-menus) to prevent the control from bubbling when the method triggers it so that it does not trigger the binding

<!--  Filter Navigation Bar  -->
<div class="border_b_bottom_3eee text-center width_40 float_left active" style="z-index: 999">
  <div class="margin_bottom_10 margin_top_10 ">
    <span onclick="showOrHideItem(this,event)" class="title">
       classification 
      <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 sqh_position_top_100 sqh_position_left_0 display_none" 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="https://www.baidu.com">
        <span class="float_left"> Housekeeping </span>
        <span class="float_right icon iconfont sqh_line_height_15">&#xe60e;</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 iconfont sqh_line_height_15">&#xe60e;</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"> snacks </span>
        <span class="float_right icon iconfont sqh_line_height_15">&#xe60e;</span>
        <span class="clearfix"></span>
      </li>
    </ul>
  </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">
       classification 
      <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"> Housekeeping 1</span>
        <span class="float_right icon iconfont sqh_line_height_15">&#xe60e;</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"> Vegetables 1</span>
        <span class="float_right icon iconfont sqh_line_height_15">&#xe60e;</span>
        <span class="clearfix"></span>
      </li>
      <li class=" margin_left_10 margin_right_10 sqh_pointer" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left"> snacks 1</span>
        <span class="float_right icon iconfont sqh_line_height_15">&#xe60e;</span>
        <span class="clearfix"></span>
      </li>
    </ul>
  </div>
</div>
<div class="text-right border_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">&#xe606;</span>
  </div>
  <!--  Show 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 class="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;">&#xe606;</span>
          <input class="in_search all_width padding_left_30 sqh_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 Events 
  $(document).on("click",function(){
    // The found control is ul And contains attributes data-show="show" The control of, if any, hides it 
    $("ul[data-show='show']").slideUp("slow");
  });
  $(document).on("click",function(){
    // The found control is div And contains attributes data-show="show" Control, if any, to modify it css Properties. 
    $("div[data-search='show']").css("display","none").css("width","32%");
  });
});
// Show or close filter conditions 
function showOrHideItem(obj,event){
// alert(arguments.callee);
// alert(showOrHideItem.caller);
  var $currentObj = $(obj);
  // Hide all drop-down lists 
  $("ul[data-show='show']").hide();
  // Clear All active class 
  $currentObj.closest(".row").find("div.active").removeClass("active");
  // Give Current div Add Selected Style 
  $currentObj.closest(".float_left").addClass("active")
  var $ul = $currentObj.closest("div").find("ul");
  //ul Is Expanded 
  if($ul.data("show") == "show"){
    $ul.slideUp("slow");
    $ul.attr("data-show","hide");
  }else{
    //ul Is Expanded 
    $ul.slideDown("slow");
    $ul.attr("data-show","show");
    // Prevent Event Bubbles 
    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");
  // Prevent Event Bubbles 
  event.stopPropagation();
}
function stopEvent(obj,event){
  // Prevent Event Bubbles 
  event.stopPropagation();
}
</script>

More readers interested in JavaScript related content can view this site's topics: JavaScript Switching Special Effects and Techniques Summary, JavaScript Finding Algorithmic Techniques Summary, JavaScript Animation Special Effects and Techniques Summary, JavaScript Errors and Debugging Techniques Summary, JavaScript Data Structure and Algorithmic Techniques Summary,Summary of JavaScript Traversal Algorithms and Techniques and Summary of JavaScript Mathematical Operation Usage

I hope that the description in this paper will be helpful to everyone's JavaScript program design.