在引导程序中进行选择后,排序选择选项的接近程度

时间:2016-08-20 20:12:04

标签: twitter-bootstrap sorting filter

我为照片库设置了一个排序过滤器,这在大多数情况下效果很好。除了在选择使用它时,单击项目后,选项框不会自动关闭。我必须单击选择框顶部的备份以使其关闭。但大多数用户都不知道这样做,它掩盖了下面的数据。这是一种痛苦。任何帮助将不胜感激。我不是超级技术,所以请详细说明。谢谢。

<div class="sorting_options clearfix">


                            <!-- filter_block -->
                            <div id="options" class="product_sort">
                                <div class="filterhouse_btn"><span class="sorting_options_text">Select Your Model</span><span class="pull-right glyphicon glyphicon-chevron-down"></span><div class="clear"></div></div>
                                <ul id="filter" class="option-set" data-option-key="filter">

                                    <li><a class="" href="#filter" data-option-value=".arrow">The Arrow</a></li>
                                    <li><a class="" href="#filter" data-option-value=".berry">The Berry</a></li>
                                    <li><a class="" href="#filter" data-option-value=".cypress">The Cypress</a></li>
                                    <li><a class="" href="#filter" data-option-value=".dog">The Dog</a></li>
                                    <li><a class="" href="#filter" data-option-value=".siteplan">Site Plan</a></li>
                                    <li><a class="" href="#filter" data-option-value=".floorplan">Floor Plans</a></li>
                                    <!--<li><a class="" href="#filter" data-option-value=".map">Map</a></li> -->
                                    <li class="current"><a class="" href="#filter" data-option-value=".arrowopen, .berryopen, .cypressopen, .dogopen, .galleryopen, .siteplanopen">Preview</a></li>
                                    <li><a class="" href="#filter" data-option-value="*">All</a></li>
                                </ul>
                            </div>
                            <script>
                                $("#filter").hide();
                                $(".filterhouse_btn, #filter li a").click(function() {
                                    $("#filter").slideToggle("fast");
                                });
                            </script>

1 个答案:

答案 0 :(得分:0)

不知道你在这里粘贴代码是否是一个拼写错误 - 但你没有在上面的代码中关闭父(sorting_options)div。我只是将您的代码粘贴到一个工作页面中,如果在代码中关闭了div,则div会按预期关闭。

&#13;
&#13;
$("#filter").hide();
$(".filterhouse_btn, #filter li a").click(function() {
  $("#filter").slideToggle("fast");
   });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sorting_options clearfix">

  <!-- filter_block -->
  <div id="options" class="product_sort">
    <div class="filterhouse_btn">
      <span class="sorting_options_text">Select Your Model</span><span class="pull-right glyphicon glyphicon-chevron-down"></span>
      <div class="clear"></div>
    </div>
    <ul id="filter" class="option-set" data-option-key="filter">
      <li><a class="" href="#filter" data-option-value=".arrow">The Arrow</a></li>
      <li><a class="" href="#filter" data-option-value=".berry">The Berry</a></li>
      <li><a class="" href="#filter" data-option-value=".cypress">The Cypress</a></li>
      <li><a class="" href="#filter" data-option-value=".dog">The Dog</a></li>
      <li><a class="" href="#filter" data-option-value=".siteplan">Site Plan</a></li>
      <li><a class="" href="#filter" data-option-value=".floorplan">Floor Plans</a></li>
      <!--<li><a class="" href="#filter" data-option-value=".map">Map</a></li> -->
      <li class="current"><a class="" href="#filter" data-option-value=".arrowopen, .berryopen, .cypressopen, .dogopen, .galleryopen, .siteplanopen">Preview</a></li>
      <li><a class="" href="#filter" data-option-value="*">All</a></li>
    </ul>
  </div>
</div>
&#13;
&#13;
&#13;