Question

我似乎无法让new-album出现并消失。当我将console.log("here")放入click函数时，没有任何内容打印到控制台。但是，我不知道访问test链接的方式有什么问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

切换课程不会显示/隐藏您的元素。需要与该类关联的CSS规则。

每次单击“新建相册”链接时，这将显示/隐藏.new-album元素

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在要展示/隐藏自身的元素上切换active课程，并使用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

如果你稍微调整一下，你仍然可以使用切换，但在切换上添加/删除一个类以启用显示/隐藏效果。查看（工作）代码段

希望这有帮助

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

麻烦切换类（jquery）

4 个答案: