除了活动链接之外，Jquery无法旋转下拉箭头

时间：2017-10-04 06:01:46

标签： jquery html css 

$(document).ready(function() {

  $(".r-product-page #menu > li > a").click(function() {
    $('ul.sub-menu').not($(this).siblings()).slideUp("slow");
    $(this).siblings("ul.sub-menu").slideToggle("slow", function() {
      $(this).siblings('.dropdown-arrow').css({
        'transform': 'rotate(180deg)'
      })
    });
  });

  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })


});
.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a>
        </li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a>
    </li>
    <li class="product-menu"><a href="#">Template D</a>
    </li>
    <li class="product-menu"><a href="#">Template E</a>
    </li>
    <li class="product-menu"><a href="#">Template F</a>
    </li>
  </ul>

  <div class="product-container" />
</div>

欲了解更多信息，

我的jsfiddle演示在这里

在这里，我要做的是，当用户点击带有下拉箭头的任何菜单时，它应该关闭过去的openend菜单并将下拉箭头旋转180度。

现在，我可以关闭非活动链接的子菜单，但是我无法将下拉箭头旋转180度以进行非活动链接。那我该怎么做呢？

3 个答案:

答案 0 :(得分：1)

您可以将active课程添加到product-menu并使用css处理transformation。

$(document).ready(function() {
  $(".r-product-page #menu > li > a").click(function() {
    $('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
    $(this).siblings("ul.sub-menu").slideToggle("slow", function() {
      if ($(this).parents('.product-menu').hasClass('active')) {
        $(this).parents('.product-menu').removeClass('active')
      } else $(this).parents('.product-menu').addClass('active');
    });
  });
  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })
});
.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}

.product-menu .dropdown-arrow {
  transition: transform .2s;
}

.product-menu.active .dropdown-arrow {
  transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a>
        </li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a>
    </li>
    <li class="product-menu"><a href="#">Template D</a>
    </li>
    <li class="product-menu"><a href="#">Template E</a>
    </li>
    <li class="product-menu"><a href="#">Template F</a>
    </li>
  </ul>

  <div class="product-container" />
</div>

答案 1 :(得分：1)

最佳方式＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT; 

$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
  if($(this).parents('.product-nav').hasClass('active')){
  $(this).parents('.product-nav').removeClass('active')
  }
  else $(this).parents('.product-nav').addClass('active');
});

答案 2 :(得分：1)

请检查一下

＆＃13;
＆＃13; 
$(document).ready(function () {
                $(".r-product-page #menu > li > a").click(function () {
                    $(this).siblings(".sub-menu").slideToggle(300);
                    $(this).siblings('.dropdown-arrow').toggleClass('close');
                    $(this).parent('li').siblings('li').children(".sub-menu").slideUp(300);
                    $(this).parent('li').siblings('li').children('.dropdown-arrow').removeClass('close');
                });
            });
＆＃13; 
.r-product-page {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
            }
            .r-product-page #menu {
                height: 100%;
                width: 300px;
            }
            .r-product-page #menu .product-menu {
                color: #4d4d49;
                font-size: 18px;
            }
            .r-product-page #menu .product-menu .sub-menu {
                display: none;
            }
            .r-product-page #menu .product-menu .sub-menu li {
                color: #898989;
                font-family: 18px;
            }
            ul {
                list-style: none;
            }
            .dropdown-arrow.close{
                transform: rotate(180deg); 
            }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
            <ul style="margin-top:5rem;" id="menu">
                <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
                    <a href="#">template A</a>
                    <ul class="sub-menu">
                        <li>x</li>
                        <li>y</li>
                        <li>z</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                    </ul>
                </li>
                <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
                    <a href="#">Template B</a>
                    <ul class="sub-menu">
                        <li><a href="#">3.1</a>
                        </li>
                    </ul>
                </li>
                <li class="product-menu" id="one"><a href="#">Template C</a>
                </li>
                <li class="product-menu"><a href="#">Template D</a>
                </li>
                <li class="product-menu"><a href="#">Template E</a>
                </li>
                <li class="product-menu"><a href="#">Template F</a>
                </li>
            </ul>

            <div class="product-container" ></div>
        </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题