Question

I want to change the color of toggle button a tag when the dropdown menu opens. Unfortunately, all of the tag get highlighted. I wanted to target specific tag.

Here's my code:

<script>
$(document).ready(function() {
 $(".dropdown-toggle").click(function(e) {
        e.preventDefault();
        $('.dropdown-menu').not($(this).next('.dropdown-menu')).fadeOut()
        $(this).next('.dropdown-menu').fadeToggle().toggleClass('isOpen');

        if ($('.dropdown-menu').hasClass('isOpen')) {
            $(this).html("-"); 
            $(".sidebar-collections .sdc-element ul li a").css("color", "#f37727");
        } else {
            $(this).html("+");
            $(".sidebar-collections .sdc-element ul li a").css("color", "#000");
        }
    });
});

This is my issue

<li class="list-unstyled nav-sub-mega">
              <a href="{{ link.url }}">{{ link.title | escape }}</a> 
                                <button class="dropdown-toggle" data-toggle="dropdown" href="#">+</button>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-menu-li"><a href="">Test</a></li>
                                    <li class="dropdown-menu-li"><a href="">Test</a></li>
                                    <li class="dropdown-menu-li"><a href="">Test</a></li>
                                    <li class="dropdown-menu-li"><a href="">Test</a></li>   
                                    <li class="dropdown-menu-li"><a href="">Test</a></li>       
                                </ul>                                   
            </li>

我想在我的下拉列表打开时突出显示特定的href，然后如果关闭，它将返回到黑色。

Answer 1

你可以试试这种方式

  $(this).children(".sidebar-collections .sdc-element ul li a").css("color", "#f37727");

Answer 2

您需要通过css应用颜色，而目标切换按钮颜色可以使用jQuery更改，如下所示：

$(document).ready(function() {
 $(".dropdown-toggle").click(function(e) {
        e.preventDefault();
        $('.dropdown-menu').not($(this).next('.dropdown-menu')).fadeOut()
        $(this).next('.dropdown-menu').fadeToggle().toggleClass('isOpen');

        if ($('.dropdown-menu').hasClass('isOpen')) {
            $(this).html("-"); 
            $(this).prev().css("color", "#f37727");
        } else {
            $(this).html("+");
        }
    });
});

CSS：

.sidebar-collections .sdc-element ul li a {
   color:#000;
}

Answer 3

如果您想要单击按钮左侧的元素，可以使用以下代码：

$(function() {
        $(".dropdown-toggle").click(function(e) {
            e.preventDefault();
            $('.dropdown-menu').not($(this).next('.dropdown-menu')).fadeOut()
            $(this).next('.dropdown-menu').fadeToggle().toggleClass('isOpen');

            if ($('.dropdown-menu').hasClass('isOpen')) {
                $(this).html("-"); 
                //$(".sidebar-collections .sdc-element ul li a").css("color", "#f37727");
                $(this).siblings('a').css("color", "#f37727");
            } else {
                $(this).html("+");
                //$(".sidebar-collections .sdc-element ul li a").css("color", "#000");
                $(this).siblings('a').css("color", "#000");
            }
        });
    });

如果您仍想要改进，请告诉我。

jQuery突出显示特定的<a> when dropdown menu opens

3 个答案: