jQuery toggle div и текст

Question

Мне нужна помощь в покупке этого кода, я прочитал подобные вопросы & ответы здесь на stackoverflow, но я все еще не могу понять это правильно.

У меня есть ссылка, которая населена .html («») читать more…

при нажатии открывает скрытый DIV и в конце .html («») читает less...

Когда я нажмите «Закрыть», «Слайды» закрыты, но текст по-прежнему читается less...

Я прочитал много статей о том, как это сделать, но я смущен и не могу преодолеть это последнее препятствие, любая помощь будет высоко оценена.

// это интро ДИВ

<div id="" class=""> 
    <p> 
     Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
     integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
     wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas 
     ligula nostra, accumsan taciti. 
    </p> 
</div> 

// это следующий DIV скрыт

<div class="overview-continued"> 
    <p> 
     Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
     integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
     wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas 
     ligula nostra, accumsan taciti. 
    </p> 
</div> 

<a class="show-overview" href="#"><h4></h4></a> 

$(document).ready(function() { 
    $(".overview-continued").hide(); 
    $(".show-overview").html("more..."); 
    $(".show-overview").click(function() { 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("less..."); 
     return false; 
    }); 
});​ 

Answer 1

Вы только когда-либо установить его в less... Вы также должны оценить его и установить его на more..., если текущее значение равно less....

См DEMO: Comparing HTML

$(document).ready(function() { 
    $(".overview-continued").hide(); 
    $(".show-overview").html("more..."); 
    $(".show-overview").click(function() { 
     var text = $(this).html(); 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html(text == "less..." ? "more..." : "less..."); 
     return false; 
    }); 
});​ 

Редактировать
freakish упоминается в комментариях, что сравнение HTMLs плохая практика.
(также обновленные образцы использовать текст и теги, как указано на OP)

С этой целью увидеть альтернативный DEMO: Using Attributes

anchor получил новый пользовательский атрибут:

<a class="show-overview" data-item-state="showLess">...</a>​ 

Script обновляется и немного повторного пересчета:

$(document).ready(function() { 
    $(".overview-continued").hide(); 

    setState(); 

    $(".show-overview").click(function() { 
     $(".overview-continued").slideToggle("1000"); 
     setState(); 
     return false; 
    }); 

    function setState() { 
     var control = $(".show-overview"); 
     var state = control.attr("data-item-state"); 

     control.html(state == "showLess" ? "more..." : "less..."); 
     control.attr("data-item-state", state == "showLess" ? "showMore" : "showLess"); 
    }; 
});​ 

Answer 2

Вам необходимо поставить условное обозначение в своем нажмите функцию, потому что вы всегда настройки .Show-обзор на «меньше ...»

не может быть правильным синтаксисом, но:

$(".show-overview").click(function() 

    { 
     $(".overview-continued").slideToggle("1000"); 
     if($(".show-overview").html() == "less...") 
     { 
     $(".show-overview").html("more..."); 
     } 
     else 
     { 
     $(".show-overview").html("less..."); 
     } 
     return false; 

    }); 

Answer 3

Вы должны знать, когда открыто div/закрыто с JavaScript точка зрения. Попробуйте следующее:

$(document).ready(function() { 
    var overview = $(".overview-continued"); 
    overview.hide(); 
    var show = $(".show-overview"); 
    show.html("more..."); 
    show.click(function(e) { 
     e.preventDefault(); 
     var is_opened = overview.data('is_opened'); 
     if (!is_opened) { 
      overview.slideDown(500, function() { 
       show.html("less..."); 
      }); 
     } else { 
      overview.slideUp(500, function() { 
       show.html("more..."); 
      }); 
     } 
     overview.data('is_opened', !is_opened); 
    }); 
}); 

Проверьте этот код jsFiddle. Обратите внимание, что я немного обработал ваш код.

Answer 4

вы говорите прямо здесь, в функции щелчка, чтобы нанести на него знак «.less». было бы проще понять, если вы разделите его двумя способами ... что-то вдоль этих линий:

$(document).ready(function() { 
    function close(){ 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("more..."); 
    } 
    function open(){ 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("less..."); 
    } 
    $(".overview-continued").hide(); 
    $(".show-overview").toggle(open,close); 
});​ 

редактировать: из-за комментарии