Question

我正在尝试切换列表中两个按钮的CSS。如果单击一个，则另一个应该没有边框，反之亦然。这是我的代码：

function navigate_menu(event, ec){

    $(event).css("border-top", "3px solid rgba(102,205,0, 0.8)");
   var search_id=$(event).attr("name");
   var chartid = "pie_chart_"+$(event).attr("name");
   var editid = "edit_"+$(event).attr("name");

   if(ec=="c"){

        $(".li-edit").css("border-top", "0px solid rgba(102,205,0, 0.8)");      
        $("#"+chartid).appendTo($("#chart_"+search_id+"_container"));
        $("#"+editid).css("display","none");
        $("#"+chartid).css("display","block");


   }else{

        $(".li-chart").css("border-top", "0px solid rgba(102,205,0, 0.8)");         
        $("#"+editid).appendTo($("#chart_"+search_id+"_container"));
        $("#"+chartid).css("display","none");
        $("#"+editid).css("display","block");


   }  
 }

HTML：

+"<ul id=\"navigation_list\">"
        +"<li onclick=\"navigate_menu(this,'c')\" class=\"li-chart\" name=\""+search_id+"\">Chart &amp; Legend</li>"
        +"<li onclick=\"navigate_menu(this,'e')\" class=\"li-edit\" name=\""+search_id+"\">Edit Chart\\Change Data</li>"
+"</ul>"

所以，当我第一次点击时，没有任何反应，然后在第二次点击之后就可以了。然后当我点击另一个按钮时，相同（首先没有，第二个工作）。我想也许在第一次点击它认为我点击了父（ul），但我不知道如何解决它。抱歉，因为这个“菜单”被添加到JS函数的多个元素中。

我还尝试了addClass()和removeClass()，结果仍然相同。

谢谢！

Answer 1

为每个li分享一个共享课程，例如： li-item：

<ul id="navigation_list">
    <li onclick="navigate_menu(this,'c')" class="li-chart li-item" name="+search_id+">Chart &amp; Legend</li>
    <li onclick="navigate_menu(this,'e')" class="li-edit li-item" name="+search_id">Edit Chart Change Data</li>
</ul>

然后使用JQuery .on("click"函数检测点击并将边框应用于所点击的内容并从其他所有内容中删除：

$(document).ready(function() {
    $(document).on("click", ".li-item", function() {
        $(this).addClass("border");
        $(".li-item").not($(this)).removeClass("border");
    })
})

创建一个具有要应用的样式的CSS类：

.border {
    border: 2px solid blue;
}

小提琴：https://jsfiddle.net/w9bwq57m/

Answer 2

在你的CSS中创建bordered类。然后通过传递fn和第二个参数（不知道如何命名）在你的点击处理程序中的某个地方调用element我刚写了context。确保您已从上面的代码中删除了过时的工作人员，该代码负责更改边框。

function toggleBorder(element, context){

   if(context === 'c'){
      if($(".li-chart").hasClass('bordered')){
         $(".li-chart").removeClass('bordered');
      }
      $(".li-edit").addClass('bordered');

   }else{
      if($(".li-edit").hasClass('bordered')){
         $(".li-edit").removeClass('bordered');
      }
      $(".li-chart").addClass('bordered');
   }

}

Answer 3

我建议使用jquery click而不是on li元素。您还需要添加data-key =＆＃34; c＆＃34;和data-key =＆＃34; e＆＃34;到li元素，所以这些值可以传递给函数：

 $("#navigation_list li").click(function () {
    navigate_menu(this, $(this).data('key')); 
});

第一次单击时不会触发css（）

3 个答案: