根据Div是否打开添加和删除类

时间：2015-09-05 22:00:02

标签： jquery html css

我有这个跟随以下jQuery的HTML：

<nav class="navigation">
    <ul>
        <li class="has-sub">iPad <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPadAir2.php">iPad Air 2 Review</a></li>
                <li><a href="iPadAir.php">iPad Air Review</a></li>
                <li><a href="iPadMini2.php">iPad mini 2 Review</a></li>
            </ul>
        </li>
        <li class="has-sub">iPhone <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPhone6.php">iPhone 6 Review</a></li>
                <li><a href="iPhone5s.php">iPhone 5s Review</a></li>
                <li><a href="iPhone5c.php">iPhone 5c Review</a></li>
                <li><a href="iPhone5.php">iPhone 5 Review</a></li>
                <li><a href="iPhone4s.php">iPhone 4s Review</a></li>
            </ul>
        </li>
        <li class="has-sub">Mac <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="MacBook.php">MacBook Review</a></li>
                <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a></li>
                <li><a href="MacBookPro.php">MacBook Pro Review</a></li>
                <li><a href="MacBookAir.php">MacBook Air Review</a></li>
            </ul>
        </li>
    </ul>
</nav>

$(document).ready(function() {
    $(".has-sub").click(function() {
        $(this).find(".sub-menu").slideToggle(500);
        $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    });
});

正如您所看到的，i有一个fa-angle-down类。点击后，li会打开，但我想删除fa-angle-down的课程，并在fa-angle-up课程中添加i课程。有人可以告诉我如何做到这一点吗？

感谢。

编辑：

下面的导航CSS。

nav {
    background : #034893;
    height : 50px;
}

nav ul,
nav li,
nav a { 
    margin : 0; 
    padding : 0;
}

nav > ul > li {
    color : white;
    display : block;
    float : left;
    font-size : 18px;
    line-height : 50px;
    position : relative;
    transition : all .3s linear;
    width : 25%;
    z-index : 999;
}

nav > ul > li:hover {
    background : #88bffc;
    color : #333;
    cursor : pointer;
}

nav > ul > li > ul {
    background : #034893;
    left : 0;
    margin : 0 auto;
    position : absolute;
    right : 0;
    text-align : left;
}

nav ul ul a {
    color : white;
    display : block;
    font-size : 14px;
    padding : 6px 12px;
}

nav ul ul a:hover {
    background : #88bffc;
}

4 个答案:

答案 0 :(得分：1)

将锚<a>用于除了前往某个位置以外的其他内容时，请使用preventDefault();。当我认为您需要列表项fa-angle-down时，<i>类已分配给斜体<li>元素。它似乎有手风琴效果，对吗？使用toggleClass完成所需类的关闭和打开。如果链接指向实际位置，请注释掉e.preventDefault(); 

$(document).ready(function() {

  $(".has-sub").click(function(e) {
    // e.preventDefault();

    $(this).find(".sub-menu").slideToggle(500);
    $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $('.fa').not(this).removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find('.fa').toggleClass('fa-angle-down fa-angle-up');

  });
});
nav {
  background: #034893;
  height: 50px;
}
nav ul,
nav li,
nav a {
  margin: 0;
  padding: 0;
}
nav > ul > li {
  color: white;
  display: block;
  float: left;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  transition: all .3s linear;
  width: 25%;
  z-index: 999;
}
nav > ul > li:hover {
  background: #88bffc;
  color: #333;
  cursor: pointer;
}
nav > ul > li > ul {
  background: #034893;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
}
nav ul ul a {
  color: white;
  display: block;
  font-size: 14px;
  padding: 6px 12px;
}
nav ul ul a:hover {
  background: #88bffc;
}
.fa.fa-angle-up:before {
  content: '\f106 ';
}
.fa.fa-angle-down:before {
  content: '\f107 ';
}
<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<nav class="navigation">
  <ul>
    <li class="has-sub"><i class="fa fa-angle-up">iPad</i>
      <ul class="sub-menu">
        <li><a href="iPadAir2.php">iPad Air 2 Review</a>
        </li>
        <li><a href="iPadAir.php">iPad Air Review</a>
        </li>
        <li><a href="iPadMini2.php">iPad mini 2 Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">iPhone</i>
      <ul class="sub-menu">
        <li><a href="iPhone6.php">iPhone 6 Review</a>
        </li>
        <li><a href="iPhone5s.php">iPhone 5s Review</a>
        </li>
        <li><a href="iPhone5c.php">iPhone 5c Review</a>
        </li>
        <li><a href="iPhone5.php">iPhone 5 Review</a>
        </li>
        <li><a href="iPhone4s.php">iPhone 4s Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">Map</i>
      <ul class="sub-menu">
        <li><a href="MacBook.php">MacBook Review</a>
        </li>
        <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a>
        </li>
        <li><a href="MacBookPro.php">MacBook Pro Review</a>
        </li>
        <li><a href="MacBookAir.php">MacBook Air Review</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

答案 1 :(得分：1)

已编辑这样可行，检查这些类是否在DOM中切换。 编辑是最初只切换.fa类，它为所点击的菜单项打开/关闭向下/向上。

$(".has-sub").click(function(e) {
    e.preventDefault;
    $this = $(this);
    $this.find(".sub-menu").slideToggle(500);
    $this.siblings(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $this.find(".fa").toggleClass('fa-angle-down fa-angle-up');
    $this.siblings(".has-sub").not(this).find(".fa-angle-up").toggleClass('fa-angle-up fa-angle-down');
});

答案 2 :(得分：0)

    $(document).ready(function() { 
$(".has-sub").click(function() {
$(this).find('i.fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find(".sub-menu").slideToggle(500);
 $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500).parents('li').find('i.fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down'); 
}); 
});

答案 3 :(得分：0)

您可以使用jQuery添加和删除类。有点像这样：

http://jsfiddle.net/j95en0Lp/1/

HTML：

<ul>
    <li class="fa-angle">Test (Click me to add a new class)</li>
</ul>

CSS：

.fa-angle{
    color: red;
    cursor: pointer;
}

.fa-angle-up{
    color: blue;
    cursor: pointer;
}

jQuery的：

$(document).ready(function(){
    $(document).on('click', '.fa-angle', function(){
        $(this).addClass('fa-angle-up');
        $(this).removeClass('fa-angle');                     
    });

    $(document).on('click', '.fa-angle-up', function(){
        $(this).addClass('fa-angle');
        $(this).removeClass('fa-angle-up');                     
    });
});

这里我只是添加和删除类来更改字体颜色，但您可以更改类以添加或删除图标，字体颜色等。希望这有用。 < / p>

相关问题
最新问题