无法切换 class (jquery)

Question

我似乎无法让 new-album 出现和消失。当我将 console.log("here") 放入 click 函数中时，控制台不会打印任何内容。但是，我看不出我访问 test link.

的方式有什么问题

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

Answer 1

只是切换 class 不会 show/hide 你元素。需要有 CSS 条规则与 class 相关联。

每次单击新相册 link 时，这将 show/hide .new-album 元素

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

Answer 2

您可以在您想要 show/hide 本身的元素上切换 active class，并且通过使用 opacity 而不是 display，您可以也为这个过程制作动画。

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

Answer 3

这通常发生在多个事件在同一事件上运行时。尝试更改为 .mouseUp 而不是 .click。

Answer 4

如果稍微调整一下，您仍然可以使用切换，但是 add/remove 切换 class 以启用 show/hide 效果。查看（工作）片段

希望对您有所帮助

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

无法切换 class (jquery)

Trouble toggling class (jquery)

html

javascript

css

jquery

toggle