Question

我有一个基于列表的导航按钮，带有javascript。

一切正常，但点击按钮链接时，功能会被破坏......

问题是什么？任何帮助都会很棒!!感谢。

＆＃13;

$(".FIRST").click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
 } else {
        $(this).addClass('active')
    }
});

$(".FIRST").click(function (evt) {      
        if(evt.target.tagName != 'UL') 
            return;
        $("li", this).toggle();
    });

＆＃13;

ul li {list-style: none;
    border: 0;
    margin: 0;
    padding: 0;
}

a {text-decoration: none; color: white;}

.FIRST {
    font-size:0px;
    width: 1px;
    height: 35px;
    background-color: green;
    border: solid 1px red;
}

.FIRST:hover {background-color: lightgreen;}

.FIRST.active {background-color: yellow;}

.SECOND {
    display: none;
    position: relative;
    top: 0px;
    width: 120px;
    height: 20px;
    border-radius:12px;
    background-color: green;
    line-height:30px;
    margin: 0 auto 6px 55px;
    font-size:12px;
    line-height: 1.8em;
    padding: 0 10px 0 20px;
}

.FIRST:hover {background-color: lightgreen;}

.FIRST.active {background-color: yellow;}
.SECOND:hover {background-color: lightgreen;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="FIRST" id="MAIN">
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
           LINK 1
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 2
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 3
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 4
        </a>
    </li>
</ul>

＆＃13;

Fiddle

由于

Answer 1

尝试在第一个函数中添加判断

BackColor

ps：我认为你应该把按钮作为一个单独的标签

Answer 2

您的主播位于<li>个标签中，这也是您<ul>的孩子，因为'.FIRST'。

每当您点击锚链接时，您的父容器也会捕获该事件，即<ul>，其中包含类.FIRST。

在这种情况下，您的父容器是附加了单击处理程序的<ul>。因此，当您单击任何锚点时，它会触发jquery toggle()函数，该函数会使用类<ul>更改.FIRST的颜色。

更简单的方法是

使用div容器制作按钮按钮并附加一个点击处理程序。此单击处理程序将使div更改其颜色，并切换列表以显示或隐藏。

SNIPPET HERE

$(".FIRST").click(function(){
if($('#big_list').css('opacity')=='0'){
	$('#big_list').css('opacity','1');
	}
else{
$('#big_list').css('opacity','0');
}
    if($(this).hasClass('active')){
        $(this).removeClass('active')
        
 } else {
        $(this).addClass('active'); 
    }
});

ul li {list-style: none;
    border: 0;
    margin: 0;
    padding: 0;
}

a {text-decoration: none; color: white;}

.FIRST {
   vertical-align:top;
  display:inline-block;
  position:relatve;
  top:0;
    font-size:0px;
    width: 35px;
    height: 35px;
    background-color: green;
    border: solid 1px red;
}



#big_list{
  display:inline-block;
  opacity:0;
  margin:auto;
  padding:0;
}
#container{
  position:relative;
  top:0px;

}

.SECOND {
    width: 120px;
    height: 20px;
    border-radius:12px;
    background-color: green;
    margin: 0 auto 6px 0px;
    font-size:12px;
    padding: 0 10px 0 20px;
}


.FIRST.active {background-color: yellow;}
.SECOND:hover {background-color: lightgreen;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id='container'>
<div class="FIRST" id="MAIN">
</div>
<ul id='big_list'>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
           LINK 1
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 2
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 3
        </a>
    </li>
    <li class="SECOND">
        <a href="http://blank.org/" target="_blank">
            LINK 4
        </a>
    </li>
</ul>

</div>

单击链接后按钮更改功能

2 个答案: