javascript - 如何激活一个选项并禁用其他选项

Question

我正在创建一个导航栏。当我单击其中一个选项时，该选项将变为事件状态，但是当我单击另一个选项时，前一个事件选项仍保留在那里

查看我的 fiddle 示例:https://jsfiddle.net/bpmbu3th/

我只想使被单击的项目处于事件状态

我的 HTML

  <p id="parent1">i'm the parent</p>
  <p id="child1">i'm the first child</p>

  <p id="parent2">i'm the 2nd parent</p>
  <p id="child2">i'm the second children</p>

我的CSS

 #parent1{

   background-color:#000;
   color:#fff;
 }
 #child1{

  display:none;
  background-color:red;
  color:#fff;
 }
 #parent2{

  background-color:#000;
  color:#fff;
 }
 #child2{

 display:none;
 background-color:red;
 color:#fff;
 }

我的 JQUERY

  (function(){

        var object = {

            dropdown1:$('#child1'),
            dropdown2:$('#child2'),

            dropdown1parent: function(){
                if(object.dropdown1.is(':hidden')){
                    object.dropdown1.fadeIn();
                }
                else{
                    object.dropdown1.fadeOut();
                }

            },

            dropdown2parent: function(){

                if(object.dropdown2.is(':hidden')){
                    object.dropdown2.fadeIn();
                }
                else
                {
                    object.dropdown2.fadeOut();
                }
            }   


        };

        $('#parent1').on('click', object.dropdown1parent);
        $('#parent2').on('click', object.dropdown2parent);


    })();  

Answer 1

您应该使用公共(public)类来摆脱重复的代码。

这是一个例子

$(function() {
  $('.parent').on('click', function() {
    var child = $(this).next('.child'); //Finds the next child
    //fade out others then handle current child
    $('.child').not(child).fadeOut(function() {
      child.fadeToggle();
    })
  });
});

.parent {
    background-color:#000;
    color:#fff;
}
.child {
    display:none;
    background-color:red;
    color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parent">i'm the parent</p>
<p class="child">i'm the first child</p>
<p class="parent">i'm the 2nd parent</p>
<p class="child">i'm the second children</p>