第二次单击jQuery时滑动向上(）

slideUp() on second click jQuery

本文关键字：单击 jQuery 第二次更新时间：2023-09-26

如何在第二次单击时创建slideUp() li元素？

我已经尝试过使用.data()来收集点击次数，但这种方法破坏了我使用jQuery应用的css（border）。

var paragraph = $('p');
var paragraphParent = $('li');
paragraph.addClass('displayNone');
    
paragraphParent.on('click', function () {
paragraph.stop().slideUp();
$(this).children().stop().slideDown();
});

.displayNone{
    display:none;
}
ul{
    list-style-type: none;   
    padding: 0;
    margin: 0;
}
li{
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}
li:hover{
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>Item 1
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 2
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 3
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 4
        <p>Lorem ipsum...</p>
    </li>
</ul>

您可以尝试

    paragraphParent.on('click', function () {
        paragraph.not($(this).children('p')).slideUp();
        $(this).children().slideToggle();
    });
   paragraph.on('click', function (e) {
       e.stopPropagation();
   });

演示

为了计数，你可以使用这个代码

var paragraph = $('p');
var paragraphParent = $('li');
paragraph.addClass('displayNone');
 paragraphParent.on('click', function () {
    paragraph.not($(this).children('p')).slideUp();
    $(this).children().slideToggle();
     // count number of clicks
     var click_num = parseInt($(this).attr('data-count'));
     $(this).attr('data-count' , click_num + 1);
     alert($(this).attr('data-count'));
});
paragraph.on('click', function (e) {
   e.stopPropagation();
});

DEMO

试试这个。这里我使用了引导崩溃

.displayNone {
    display:none;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}
li:hover {
    cursor: pointer;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <ul>
        <li data-toggle="collapse" data-target="#demo1"><a>Item 1</a>
            <p class="collapse" id="demo1">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo2"><a>Item 2</a>
            <p class="collapse" id="demo2">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo3"><a>Item 3</a>
            <p class="collapse" id="demo3">Lorem ipsum...</p>
        </li>
    </ul>
</div>

您可以使用jQuery .data API，正如您所尝试的那样。

$(function() {
  $('ul li').find('p').hide();
  $('ul').on('click', 'li', function() {
    var count = $(this).data('count') + 1;
    $(this).data('count', count)
    if (count == 2) {
      $(this).data('count', 0).find('p').stop().slideDown();
      $('ul li').not(this).find('p').slideUp();
    }
  })
})

.displayNone {
  display: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  width: 200px;
  font-size: 20px;
  background-color: lightblue;
  color: black;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
}
li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-count="0">Item 1
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 2
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 3
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 4
    <p>Lorem ipsum...</p>
  </li>
</ul>