измените имя div после нажатия на кнопку SlideToggle jQuery

Question

У меня есть этот код слайда. Когда я нажимаю кнопку с надписью «open», она меняет текст на «закрыть», но проблема остается «закрытой», даже если вы нажмете ее снова, чтобы я захотел изменить текст на «открыть», когда я нажимаю на «закрыть»

этот код работал отлично, но теперь он не работает без причины.

<script> 
    $(document).ready(function() { 
     $("#open").click(function() { 
      $("#close").slideToggle("slow"); 
      var t=$("#open").html()==="close"?"open:close"; 
      $("#open").html(t); 
      reset(); 
     }); 
    }); 
</script> 


<div id="open" align="center"><p>open</p></div> 
<div id="close"> <p>dddddddddddd</p></div> 

<style type="text/css"> 

    #open { 
     background:blue; 
     height:25px; 
     color:white; 
    } 

    #close { 
     background:green; 
     height:300px; 
     color:white; 
     display:none; 
    } 
</style> 

Answer 1

попробуйте использовать .text() вместо .html()

также лучший подход может быть, чтобы переключить имя класса на контейнере, и основывать свою функцию на этом, а чем во внутреннем тексте.

ваш обновленный обработчик JQuery нажмите будет выглядеть примерно так:

$('#toggler').click(function(){ 
    $(this).next('.textBit').slideToggle().toggleClass('open'); 

    if($(this).next('.open').length){ 
    $(this).text('closed'); 
    } 
    else{ 
    $(this).text('open'); 
    } 

}); 

Heres быстро slideToggle demo, что вы можете чувствовать себя свободно редактировать

и это version using a ternary operator

Answer 2

Используйте вместо этого:

$("#open").click(function(){ 
      $("#close").slideToggle("slow"); 
      $("#open").text($(this).text()=="open" ? "close" : "open"); 
     });