問題のトグルクラス（jquery）

new-albumが表示されなくなることはありません。 console.log("here")をclick関数に入れても、コンソールに何も表示されません。しかし、私はtestリンクにアクセスする方法に何が問題なのかは分かりません。ちょうどあなたの要素を表示/非表示されませんクラスをトグル問題のトグルクラス（jquery）

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
    $(".content").toggleClass("new-album"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album"> 
 
    ... 
 
    </div> 
 
    ... 
 
</div>

出典

2017-03-22 stumped

を助け

希望をスニペット。 .new-albumクラスに基づいて要素を表示/非表示するにはCSSを使用していますか？ –

'.new-album'は青い矩形で、リンクを表示/非表示にしたいのですが – stumped

現在、' new-album'クラスを 'content'に追加しています。そのリンクをクリックすると 'new-album'クラスの可視性を切り替えたいと思っています（これは' content'の兄弟であり、 'content'自体ではありません）。 – Ravenous

ニューアルバムのリンクがクリックされるたびに隠し、 displayの代わりにopacityを使用すると、プロセスをアニメートすることもできます。

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
     $(".content").find(".new-album").toggleClass('active'); 
 
    }); 
 
});

.new-album { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: blue; 
 
    transition: opacity 1s linear; 
 
    opacity: 0; 
 
} 
 

 
.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="index.php">Home</a></li> 
 
       <li id="test"><a href="#">New Album</a></li> 
 
       <li><a href="#">New Photo</a></li> 
 
       <li id="login"><a href="#">Login</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div class="content"> 
 
      <div class="new-album"> 
 
       ... 
 
      </div> 
 
     </div> 
 
</body>

出典

2017-03-22 23:27:26 Ravenous

。そのクラスに関連付けられたCSSルールが必要です。

これが表示されます

/.new-album要素にあなたが/非表示自体を表示したい要素にactiveクラスを切り替えることができます

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
    $(".content").toggleClass("show-new-album"); 
 
    }); 
 
});

.new-album { 
 
    display: none; 
 
} 
 

 
.show-new-album .new-album { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album"> 
 
    ... 
 
    </div> 
 
</div>

出典

2017-03-22 23:23:54

複数のイベントが同じイベントで実行されているとき、これは通常起こります。 .clickではなく.mouseUpに変更してみてください。

出典

2017-03-23 00:12:49 Maarten

少し微調整した場合でも、トグルを使用できますが、表示/非表示の効果を有効にするには、トグルでクラスを追加/削除してください。チェックアウト（作業）これは（クラストグル）私のために正常に動作しているようだ、これは

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
     $(".new-album").toggleClass("show"); 
 
    }); 
 
    
 
});

nav { 
 
    display: block; 
 
    } 
 
    a{ 
 
    color: #000000; 
 
} 
 
a:hover{ color:red;} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
ul li a { 
 
    margin-left: 5px; 
 
    text-decoration: none; 
 
} 
 
p{ 
 
width:100%; 
 
text-align:left; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.new-album { 
 
    display: block; 
 
} 
 

 
.show { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#album1">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album show"> 
 
    <a id="album1"></a> 
 
    <p>Check out the National's new album - it rocks!</p> 
 
    </div> 
 
</div>

出典

2017-03-23 01:43:40

"New Album"リンクをクリックしてください –

問題のトグルクラス（jquery）

答えて

関連する問題