隱藏可見內容之前查看下一個內容

當您點擊與id="viewers"的鏈接以查看它的內容，然後纔看得到後，當您單擊與id="voters"鏈接，id="viewers"將隱藏，然後顯示id="voters"的內容。我怎樣才能做到這一點？我試過爲自己，但我不走了這麼遠：/這是我的代碼：隱藏可見內容之前查看下一個內容

$('#view_voters').click(function() { 
    if($('#viewers').is(':visible')) { 
     $('#viewers').slideUp('slow'); 
    } 

    if($('#viewers').is(':hidden')) { 
     $('#voters').slideToggle('slow'); 
    } 
});

HTML

echo '<div class="paddingbottom-10" id="voters" style="display: none;">'; 
    echo '<table width="100%" cellpadding="0" cellspacing="0" class="blog-viewers">'; 
     # content 
    echo '</table>'; 
echo '</div>';

在此先感謝。

來源

2012-03-05 Erik

你的HTML嗎？ – Joseph 2012-03-05 23:28:44

@Joseph：請參閱我的編輯。 – Erik 2012-03-06 01:38:41

爲什麼要檢查兩次相同的情況？只要將您的'if-if'代碼轉換爲'if-else'代碼即可，因爲visible和hidden是相反的條件。就像這樣：

if ($('#viewers').is(':visible')) { 
    $('#viewers').slideUp('slow'); 
} 
else { 
    $('#voters').slideToggle('slow'); 
}

來源

2012-03-05 23:32:14 raina77ow

謝謝，但我已經試過這種方式來解決方案 - 它沒有工作：/ – Erik 2012-03-06 00:17:51

沒有你的HTML是很難說，但你可以簡化並做這樣的事情，這也是更具擴展性。

var $panels = $('.panel'); // All your sections with class `.panel` 

var panelSlide = function ($this) { 
    $panels.find(':visible').slideUp('fast', function() { 
     $this.slideDown(); 
    }); 
}; 
$('#voters, #viewers').click(function() { 
    panelSlide($(this).find('.panel')); 
});

來源

2012-03-05 23:33:11 elclanrs

謝謝，但我不能'id =「選民」'可見！：/ – Erik 2012-03-06 00:15:36

這更多的是一種方法概念。我懷疑這會像那樣工作。沒有你的HTML我不能肯定地說。 – elclanrs 2012-03-06 00:17:00

請在我的問題中查看我的編輯。我在'paddingbottom-10'（'panel paddingbottom-10'）之前的'class =「」'中添加了'panel'。 – Erik 2012-03-06 00:20:15

將其中一個元素設置爲隱藏，並將另一個設置爲可見。

<input id='view_voters' value='Toggle Viewers/Voters' type='button' /> 

<div style='display: none;' id='viewers'> 
    These are my viewers 
</div> 
<div id='voters'> 
    These are my voters 
</div>

然後在單擊時切換兩個元素。

$('#view_voters').click(function() { 
    $('#viewers').toggle(); 
    $('#voters').toggle(); 

});

完整的示例在這裏：

http://jsfiddle.net/7akvT/2/

來源

2012-03-05 23:38:01

謝謝，但那不是我正在尋找的。如果可以看到id =「viewers」，並且你點擊了id =「vot」，那麼第一個id（查看者）將被滑下，當它完全隱藏時，'id =「選民」將會通過'SlideToggle '。 – Erik 2012-03-06 00:17:19

隱藏可見內容之前查看下一個內容

回答

相關問題