slideUp() при втором щелчке jQuery

Question

Как я могу slideUp() ли элемент на второй клик?

Я попытался с .data() для сбора нескольких кликов, но этот метод разбивает мой css (border), примененный с помощью jQuery.

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

Answer 2

вы можете использовать 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>

Answer 3

Попробуйте это. здесь я использовал самозагрузку коллапса

.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>