0

私はjqueryを使用してdivコンテンツを表示および非表示にしようとしていますが、学習は速い傾向がありますが、jqueryについては少ししか理解していません。画像とリンクの両方を使用してdivを開き、画像を+から-に交換しようとしています。+記号と-記号の両方を含む1つのファイルとして画像を作成し、CSSを使用して画像を分割できます。現在の問題は、プラス記号またはリンクをクリックしても何も起こらず、divが表示されないことです。複数のdivがあります。これが私がこれまでにしたことです。

<div class="topic">
<a href="#" class="article_toggle" onclick="article_toggle();" style="display: block; cursor: pointer;">bla bla bla</a>
        <div class="plusminus">
        <div class="plus" onclick="art_toggle();" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus" onclick="art_toggle();" style="display: none; cursor: pointer;">&nbsp;</div>
        </div>
</div>
<br />
<div class="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

悪いことに、スクリプトにコードを追加するのを忘れました。

function article_toggle(show) {
var currentart = $(show + ' .article-arrow .article-plus').attr('style');
if(currentart.search('display: none;')==-1) {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: none; cursor: pointer;');        
    $(show + ' .article-arrow .article-plus').attr('style', 'display: block; cursor: pointer;');        
    $(show + ' .faq-content .article-section').attr('style', 'display: none;');
    $(show).stop();
    $(show).css('backgroundColor', '#ffffff');
} else {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: block; cursor: pointer;');       
    $(show + ' .article-arrow .article-plus').attr('style', 'display: none; cursor: pointer;');     
    $(show + ' .faq-content .article-section').attr('style', 'display: block;');
    $(show).css('backgroundColor', '#fff8de');
    $(show).css('backgroundColor', $(view).css('backgroundColor')).animate({
        backgroundColor: '#ffffff'
    }, 3000);
}
4

2 に答える 2

1

スクリプトを含めていなくても、これを試してください

$(document).ready(function(){

    $('.article_toggle').click(function(){

         $('.section').toggle();
     }
);​​​

JSフィドル

于 2012-10-25T15:23:59.143 に答える
0

これは私の提案です

HTML:

<div class="topic">
    <a href="#" class="article_toggle" style="display: block; cursor: pointer;">bla bla bla</a>
    <div class="plusminus">
        <div class="plus article_toggle" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus article_toggle" style="display: none; cursor: pointer;">&nbsp;</div>
    </div>
</div>
<br />
<div class="section" id="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

Javascript:

$(document).ready(function(){
    $('.article_toggle').click(function(){
        $('.section').toggle();
        $('.plusminus div').toggle();
    });
});

ノート：

  • HTML と Javascript が分離されました - すべてのクリック イベントが HTML から削除され、ページの読み込み時に jQuery に登録されました
  • クラス article_toggle が「プラス」と「マイナス」の画像にも追加され、jQuery がそれらにもクリック イベントを追加できるようになりました。
  • $('.section').toggle();コードはコンテンツを表示/非表示にします
  • $('.plusminus div').toggle();プラスボタンとマイナスボタンの表示を切り替えます
于 2012-10-25T15:32:59.907 に答える