没有

Question

我有以下代码，显示前5个项目，其余部分隐藏，直到用户点击＆＃34;显示更多＆＃34;并且＆＃34;显示更多＆＃34;替换为＆＃34;显示更少＆＃34;。

是否可以使用切换而非点击来执行此操作？。 HTML

 <ul id="business-type-div" class="list-group" style="">
                                <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="All" autocomplete="on" id="filter-business-type-all" > All</li>

                                <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Auto" id="auto" autocomplete="off"> Auto</li>

                                <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Entertainment" id="entertainment" autocomplete="off"> Entertainment</li>

                                <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Food and Beverage Services" id="restaurant-checkbox" autocomplete="off"> Food and Beverage Services</li>

                                <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Health and Wellness" id="health" autocomplete="off"> Health and Wellness</li>



                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Rental and Leasing" id="RentalandLeasing" autocomplete="off"> Rental and Leasing</li>
                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Retail" id="Retail" autocomplete="off"> Retail</li>
                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Services" id="Services" autocomplete="off"> Services</li>
                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Social Assistance" id="Social" autocomplete="off"> Social Assistance</li>
                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Transportation" id="Transportation" autocomplete="off"> Transportation</li>
                                    <li class="list-group-item"><input type="checkbox" name="filter-business-type" value="Warehousing" id="Warehousing" autocomplete="off"> Warehousing </li>


                                    <div class="show-more" style="display: block;">
                                        <a href="#">Show More</a><span class="arrow-down"></span>
                                    </div>
                                     <div class="show-less" style="display: none;">
                                        <a href="#">Show Less</a><span class="arrow-up"></span>
                                     </div>




                            </ul>

的JavaScript

   /** SHOW MORE  show LESS **/
$('#business-type-div li:gt(4)').hide();
$('.show-more').click(function(e) {
    $('ul li:gt(6)').show();
    $('.show-more').hide();
    $('.show-less').show();
    e.preventDefault();
});

$('.show-less').click(function(e) {
    $('#business-type-div li:gt(4)').hide();
    $('.show-more').show();
    $('.show-less').hide();
    e.preventDefault();
});

Answer 1

您可以使用toggle()功能在隐藏和显示元素之间切换。在这种情况下，您正在寻找排名第6及以上的列表项。由于您多次调用此选择器，因此将其存储在变量中是一种很好的做法。

var moreResults = $("#business-type-div li:gt(4)");

moreResults.hide();
$('.show-more a').click(function(e) {
    moreResults.toggle();
    e.preventDefault();
    $(this).text($(this).text() === "Show Less" ? "Show More" : "Show Less");
});

您的代码也错过了几个列表项。

$('ul li:gt(6)').show();应该是$('ul li:gt(4)).show()。可能是一个错误，但可以通过将选择器存储在我上面解释的变量中来防止。

您也不再需要show-less div，因为您只需使用jQuery更改show-more div的文本即可。这也使代码更干净，更干燥。

http://jsfiddle.net/jzmLc6z6/4/

Answer 2

首先，不能使用<div>元素作为<ul>的子元素，因为UL只接受LI元素。

所以你需要为你的MORE / LESS按钮找一个新的地方 改进的HTML ：

$("div.group").each(function() { // Handle multiple groups!

  var $UL     = $(this).find(".list-group");
  var $LI     = $UL.find("li");
  var $LIplus = $LI.filter(":gt(3)");
  var $MORE   = $(this).find(".show-more");
  var $LESS   = $(this).find(".show-less");

  $LESS.add( $LIplus ).hide();

  $LESS.add( $MORE ).click(function(evt) {
    evt.preventDefault(); // Prevent the browser jump to top
    $LIplus.add( $LESS ).add( $MORE ).toggle(); // Toggle 'em all :D
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <h2>BUSINESS</h2>
  <ul class="list-group">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
  </ul>
  <div class="show-more">
    <a href="#">Show More</a><span class="arrow-down"></span>
  </div>
  <div class="show-less">
    <a href="#">Show Less</a><span class="arrow-up"></span>
  </div>
</div><!-- END OF DIV GRoUP -->

<div class="group">
  <h2>SPORT</h2>
  <ul class="list-group">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
  </ul>
  <div class="show-more">
    <a href="#">Show More</a><span class="arrow-down"></span>
  </div>
  <div class="show-less">
    <a href="#">Show Less</a><span class="arrow-up"></span>
  </div>
</div><!-- END OF DIV GRoUP -->

Answer 3

没有

使用切换无法做到这一点。您必须使用函数绑定事件（在此示例中单击）。

我想你想做点什么：

/** SHOW - TOGGLE **/
$('#business-type-div li:gt(4)').hide();
$('.show-toggle').click(function(e) {
    e.preventDefault();
    $(this).children().toggle(); // toggle button
    $(this).closest('.list-group').find('li:gt(4)').toggle(); // toggle list
});

修改后的HTML：

<div class="show-toggle">
    <a href="#">Show More <span class="arrow-down"></span></a>
    <a href="#" style="display:none">Show Less <span class="arrow-up"></span></a>
</div>

http://jsfiddle.net/Tymek/cknc778f/

//旁注：从理论上讲，你可以在没有任何JavaScript的情况下完成它 - 仅限CSS3。不过你呢？否。

切换列表vs点击

3 个答案:

没有

http://jsfiddle.net/Tymek/cknc778f/