JQuery переключить вопрос в Firefox - PullRequest
Новая
       34

JQuery переключить вопрос в Firefox

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

Приведенный ниже код отлично работает в Chrome, но не работает корректно в Firefox.

В Chrome:

При расширении ссылки скрытия / показа отображаетсястрелка правильно при раскрытии и стрелка вниз при свертывании

В Firefox:

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

Что я делаю не так?

Спасибо 

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

Ответы [ 2 ]

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

А как насчет этого варианта с использованием toggle и toggleClass http://jsfiddle.net/347pg/

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

Вы должны использовать toggle() это намного проще и вам всего этого не нужно.

Я привел вам пример здесь: http://jsfiddle.net/MVnbM/

HTML:

<a href="javascript:;" class="clickMe">Click me</a>
<div class="arrowUp">Up</div>
<div class="arrowDown">Down</div>

JS: 

$('.arrowUp').hide();
$('a.clickMe').click(function() {
   $('.arrowUp, .arrowDown').toggle(); 
});

Вот ваш модифицированный код: 

<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');      
    $('.arrowUp').hide();
    $('div.slide').click(function() {
        $('.arrowUp, .arrowDown').toggle(); 
    });
});

<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" class="arrowUp" /><img src="images/arrow_down.png" class="arrowDown" /></div>
...