点击后，将之前点击的图标切换回原始状态

时间：2018-06-17 21:30:28

标签： javascript jquery html css click

我在导航栏上有两个下拉菜单，只要单击该锚点就可以切换图标，但如果单击一个单独的子菜单，我无法弄清楚如何重置一个。我现在问是否有办法实现这一目标，如果没有，我如何实现这一目标？

如果整件事情充斥着新手的错误，我也会提前感到抱歉。

我尝试尽可能地压缩JSfiddle，但您可能需要展开侧面部分以查看右侧受影响的图标。我遗漏了响应部分。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('nav').toggleClass('active')
  })
  $('ul li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
  })
})
$("nav ul li a").click(function() {
  $(this).find("i").toggleClass("fa-angle-down fa-angle-up");
});
＆＃13; 
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", sans-serif;
  background: url(img/sunset.jpg);
  background-attachment: fixed;
  background-position: center;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  background: #000000;
  width: 100%;
  box-sizing: border-box;
}

.header-icons {
  color: white;
}

header nav ul li a.active span {
  color: red;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

header nav ul li {
  list-style: none;
  position: relative;
}

.sub-menu {
  color: fff;
}

header nav ul li ul {
  position: absolute;
  left: 0;
  display: none;
}

header nav ul li.active ul {
  display: block;
}

header nav ul li ul li {
  display: block;
  width: auto;
  text-align: center;
}

header nav ul li ul li a {
  background: linear-gradient(#000000, #34282C);
  border-style: inset;
  border-color: #000;
}


/*full screen header*/

header nav ul li a {
  font-family: "Helvetica Neue", sans-serif;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover {
  transition: .25s;
  font-weight: ;
  color: #000000;
  background: #2196f3;
}

header nav ul li a.active {
  background: #25383C;
  font-weight: normal;
  color: #fff;
}

header nav ul li a.active:before {
  content: '\f096';
  font-family: fontAwesome;
  font-size: 25%;
  position: absolute;
  line-height: 50px;
  bottom: 20px;
  right: 2px;
  color: #fff;
  cursor: pointer;
}

.menu-toggle {
  color: #fff;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title>Practice</title>
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#"><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span></a>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="header-icons"><i class="far fa-image fa-fw"></i></span>Portfolio<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span></a>
          <ul>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
          </ul>
      </ul>
    </nav>
    </div>
    <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </header>
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这是另一种仅供您参考的解决方案。我检查li标签下的活动类，然后在i标签上删除或添加fa-angle-down或fa-angle-up类。

X

https://jsfiddle.net/80wne34L/79/

答案 1 :(得分：0)

通常这可以通过以下方式实现：

  1. 使所有箭头都向下。
  2. 点击向上箭头。

    3. 此功能适用于您：

      $("nav ul li a").click(function() {
    // Cache variables (for speed)
    var $this = $(this),
        $arrow = $this.find('.sub-menu i');

    // Make all arrows point down, excepted clicked arrow
    $('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');

    // Toggle this arrow
    $arrow.toggleClass("fa-angle-down fa-angle-up");
  });

    ＆＃13;
    ＆＃13; 
    $(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('nav').toggleClass('active')
  })
  $('ul li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
  });
  // Move into $(document).ready() for good practices
  $("nav ul li a").click(function() {
    // Cache variables (for speed)
    var $this = $(this),
        $arrow = $this.find('.sub-menu i');

    // Make all arrows point down, excepted clicked arrow
    $('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');
    
    // Toggle this arrow
    $arrow.toggleClass("fa-angle-down fa-angle-up");
  });

})
    ＆＃13; 
    body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", sans-serif;
  background: url(img/sunset.jpg);
  background-attachment: fixed;
  background-position: center;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  background: #000000;
  width: 100%;
  box-sizing: border-box;
}

.header-icons {
  color: white;
}

header nav ul li a.active span {
  color: red;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

header nav ul li {
  list-style: none;
  position: relative;
}

.sub-menu {
  color: fff;
}

header nav ul li ul {
  position: absolute;
  left: 0;
  display: none;
}

header nav ul li.active ul {
  display: block;
}

header nav ul li ul li {
  display: block;
  width: auto;
  text-align: center;
}

header nav ul li ul li a {
  background: linear-gradient(#000000, #34282C);
  border-style: inset;
  border-color: #000;
}


/*full screen header*/

header nav ul li a {
  font-family: "Helvetica Neue", sans-serif;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover {
  transition: .25s;
  font-weight: ;
  color: #000000;
  background: #2196f3;
}

header nav ul li a.active {
  background: #25383C;
  font-weight: normal;
  color: #fff;
}

header nav ul li a.active:before {
  content: '\f096';
  font-family: fontAwesome;
  font-size: 25%;
  position: absolute;
  line-height: 50px;
  bottom: 20px;
  right: 2px;
  color: #fff;
  cursor: pointer;
}

.menu-toggle {
  color: #fff;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title>Practice</title>
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#"><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span></a>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </li>
        <li>
          <a href="#">
            <span class="header-icons"><i class="far fa-image fa-fw"></i></span> Portfolio
            <span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
          </a>
          <ul>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
            <li><a href="#">Link </a></li>
          </ul>
      </ul>
    </nav>
    </div>
    <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </header>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题