隐藏和显示菜单子

时间:2015-08-25 18:36:57

标签: javascript jquery html css

我正在使用一个jquery,当点击一个菜单项时,它会隐藏并显示几个div。

但是,此时如果您点击相同的菜单项,新打开的div将保持打开状态,而不是根据需要关闭。当div类“提交”点击时,我还想实现一个隐藏div函数。

任何建议都会很棒

https://jsfiddle.net/a9ykpdwz/

Jquery的

$("#one, #two, #three").hide();

$(".one, .two, .three").click(function (e) {
e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(1000).siblings('#one, #two, #three').fadeOut(1000);
});

HTML

<div id="nav">

<a href="#" class="one">WORK</a>
<a href="#" class="two">ABOUT</a>
<a href="#" class="three">CONTACT</a>
</div>

<div id="one">
<ul>
<li>xx</li> 
<li>Spaces</li>
<li>Form</li>
<li>Mind and Body</li> 
<li>Moving Image</li> 
<li>White Trails</li> 
<li>Foreign Views</li>
<ul>
<div class="submit"> close </div>
</div>

<div id="two">Text</div>
<div id="three">Text</div>

2 个答案:

答案 0 :(得分:0)

使用fadeToggle()代替fadeIn()。我假设你的意思是你希望隐藏在submit上的所有三个div,它们在下面工作。

$("#one, #two, #three").hide();

$(".one, .two, .three").click(function(e) {
  e.preventDefault();

  $("#" + this.className).fadeToggle(1000).siblings('#one, #two, #three').fadeOut(1000);
});

$('.submit').click(function(e) {
  $('#one, #two, #three').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav">

  <a href="#" class="one">WORK</a>
  <a href="#" class="two">ABOUT</a>
  <a href="#" class="three">CONTACT</a>
</div>

<div id="one">
  <ul>
    <li>xx</li>
    <li>Spaces</li>
    <li>Form</li>
    <li>Mind and Body</li>
    <li>Moving Image</li>
    <li>White Trails</li>
    <li>Foreign Views</li>
  </ul>    <!-- corrected a missing / here -->
  <div class="submit">close</div>
</div>

<div id="two">Text</div>
<div id="three">Text</div>

答案 1 :(得分:0)

  1. 您没有为.close元素
  2. 创建活动
  3. 如果要查看新元素并隐藏上一个节目,则需要设置为display none,不进行过渡,因为元素是堆叠的,在其他情况下,您需要将元素更改为绝对元素。
  4. 小提琴:https://jsfiddle.net/a9ykpdwz/2/