任务十四

遇到的问题

1. 看了一下bootstrap的下拉框实现方式，发现其实现方式是给ul设置display:none，然后点击的时候把属性改为display：block。比较有意思的是bootstrap里面用到下拉框的时候需要给div设置data类的属性。
   

2. <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
   <li><a href="#">Something else here</a></li>
   <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
   </ul>
   </div>

   然后网上查了一下，这个data-toggle属性，实际上是bootstrap自定义的一个属性，这个属性主要是用来让js遍历的，找到哪些div需要用到下拉效果。但是bootstrap还有一个效果当点击某个控件的时候，则显示出下拉菜单，但是，当点击空白的地方的时候怎么让其自动隐藏呢？我的想法是给body绑定一个onclick事件，当点击空白的地方由于事件冒泡，触发click body的事件，但是问题来了，点击控件的时候，同样会触发body的click事件。所以 bootstrap是如何实现的呢？给document绑定事件（隐藏其子菜单），当触发控件的方法时则阻止其冒泡，不让其触发绑定。

3. $(function(){
      //给document绑定事件
      $(document).on("click",function(){
         //找到控件是ul并且包含属性data-show="show"的控件，如果有，则让其隐藏起来
         $("ul[data-show='show']").slideUp("slow");
      });
      $(document).on("click",function(){
         //找到控件是div并且包含属性data-show="show"的控件，如果有，则修改其css属性。
         $("div[data-search='show']").css("display","none").css("width","32%");
      });
   });
   //显示或关闭筛选条件
   function showOrHideItem(obj,event){
   // alert(arguments.callee);
   // alert(showOrHideItem.caller);
      var $currentObj = $(obj);
      //隐藏所有的下拉列表
      $("ul[data-show='show']").hide();
      //清除所有active类
      $currentObj.closest(".row").find("div.active").removeClass("active");
      //给当前div添加选中样式
      $currentObj.closest(".float_left").addClass("active")
      var $ul = $currentObj.closest("div").find("ul");
      //ul是展开状态
      if($ul.data("show") == "show"){
         $ul.slideUp("slow");
         $ul.attr("data-show","hide");
      }else{
         //ul是展开状态
         $ul.slideDown("slow");
         $ul.attr("data-show","show");
         //阻止事件冒泡
         event.stopPropagation();
      }
   }

   收获