JQuery переключить слайд открыть / закрыть ссылку ссылку - PullRequest
Новая
       11

JQuery переключить слайд открыть / закрыть ссылку ссылку

0 голосов
/ 28 января 2012

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

Проблема, с которой я столкнулся, заключается в том, что он нормально загружается, а нормально открывается / сворачивается.Но после того, как вы открыли / закрыли один раз, он остается на последнем изображении вниз.Мне нужно, чтобы она всегда показывала стрелку вниз, если она свернута, и стрелку вверх, если она развернута.

Любая помощь приветствуется ... спасибо 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');      
    $('div.slide').click(function() {

        // Update the HTML in this element
        var slideHtml = $(this).html();

        // Switch between show/hide
        if (slideHtml.localeCompare('Hide / Show <img src="images/arrow_up.png" />') < 0)
           $(this).html('Hide / Show <img src="images/arrow_up.png" />');
        else
           $(this).html('Hide / Show <img src="images/arrow_down.png" />');
        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });
});
</script>
<div class="view">
   <ul>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
   </ul>
</div>
<div class="slide">Hide / Show <img src="images/arrow_down.png" /></div>

Отредактировано ::

Простопонял, что мой код выше работает хорошо в Chrome.Моя проблема в том, что он не работает в Firefox.

После расширения все нормально (у меня есть стрелка вверх).После свертывания стрелка вверх остается на месте и не заменяется стрелкой вниз.

Любые советы / помощь приветствуются.

Ответы [ 2 ]

0 голосов
/ 28 января 2012

Я совсем не уверен, что это то, что вы хотите, потому что вы не даете много деталей.Но вы можете использовать этот код.В основном, это покажет div просмотра, если вы нажмете Скрыть / показать (ИЛИ изображения).И он будет скрывать, если вы нажмете еще раз.Будьте осторожны, этот скрипт не будет работать, если вы нажмете на спам. 

<style>
    #hs{ cursor: pointer; }
    #down_arrow{ display: none; }
    #view{display: none};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {

    $("#hs").toggle(
        function(){
            $("#up_arrow").hide();$("#down_arrow").show("slow");
            $("#view").show("fast");
        },
        function(){
            $("#down_arrow").hide();$("#up_arrow").show("slow");
            $("#view").hide("slow");
        }
    );


});


</script>
<div id="hs"> 
    Hide / Show
    <span id='up_arrow'><img src="images/arrow_up.png" /></span>
    <span id='down_arrow'><img src="images/down_up.png" /></span>
</div>

<div id="view">
   <ul>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
   </ul>
</div>
0 голосов
/ 28 января 2012

почему вы не используете функции переключения jQuery?

http://api.jquery.com/toggle/

http://api.jquery.com/slideToggle/

Не используйте localCompare, вы можете:

  • использовать функцию переключения
  • использовать логические значения
...