我为照片库设置了一个排序过滤器,这在大多数情况下效果很好。除了在选择使用它时,单击项目后,选项框不会自动关闭。我必须单击选择框顶部的备份以使其关闭。但大多数用户都不知道这样做,它掩盖了下面的数据。这是一种痛苦。任何帮助将不胜感激。我不是超级技术,所以请详细说明。谢谢。
<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>
答案 0 :(得分:0)
不知道你在这里粘贴代码是否是一个拼写错误 - 但你没有在上面的代码中关闭父(sorting_options)div。我只是将您的代码粘贴到一个工作页面中,如果在代码中关闭了div,则div会按预期关闭。
$("#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;