javascript - 第二次点击时的 SlideUp() jQuery

Question

如何在第二次点击时 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>

Answer 1

你可以试试

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

   paragraph.on('click', function (e) {
       e.stopPropagation();
   });

DEMO

为了计数，您可以使用此代码

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