Span class with jQuery - show hide

Question

У меня проблема с классом span с jQuery.

Что мне нужно:

• Нажмите на синюю кнопку меню, мне нужно показать синий прямоугольник диапазона и красный прямоугольник шкурку.
• Нажмите на кнопку красного меню Мне нужно показать красный прямоугольник и синий прямоугольник.
• Когда оба меню закрыты, мне нужно показать прямоугольники пролета, красного и синего.

Это хорошо работает, если я закрою меню, нажав на ту же кнопку. Но если вы откроете меню, нажмите вторую кнопку, прямоугольник будет работать плохо. С того времени оба прямоугольника полностью ошибочны.

У меня есть ошибка в коде с JQuery

<div class="all"> 
    <a href="#" class="menu"> 
     Menu 1 
     <span class="rectangle"></span> 
    </a> 

    <a href="#" class="menu2"> 
     Menu 2 
     <span class="rectangle2"></span> 
    </a> 

    <div class="sliding"> 
     <table id="tables"> 
      <tbody> 
       <tr> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="sliding2"> 
     <table id="tables2"> 
      <tbody> 
       <tr> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

jQuery(document).ready(function() { 
    jQuery(".sliding, .sliding2").hide(); 
    jQuery(".menu, .menu2").show(); 
    jQuery(".all a .rectangle2, .all a .rectangle").show(); 

    jQuery(".menu").click(function() { 
     jQuery(".sliding, .all a .rectangle2").toggle(); 
     jQuery(".sliding2").hide(); 
    }); 

    jQuery(".menu2").click(function() { 
     jQuery(".sliding2, .all a .rectangle").toggle(); 
     jQuery(".sliding").hide(); 
    });  
}); 

.sliding { 
    background-color: blue; 
    display: none; 
    padding: 20px 
} 
.menu { 
    padding: 0 20px; 
    color: blue; 
    width: 200px 
} 
.menu2 { 
    color: red; 
} 
.sliding2 { 
    background-color: red; 
    display: none; 
    padding: 20px 
} 
.all a .rectangle { 
    border-style: solid solid none; 
    border-width: 10px; 
    margin: 0 10px 
} 
.all a .rectangle2 { 
    border-style: solid solid none; 
    border-width: 10px; 
    margin: 0 10px 
} 

Пожалуйста, помогите мне. Хорошего дня.

http://jsfiddle.net/k3y4114o/1/

Answer 1

Пожалуйста, попробуйте следующее:

jQuery(".menu").click(function() { 
     jQuery(".sliding, .all a .rectangle2").toggle(); 
     if(jQuery('.sliding').is(':visible')) { 
      jQuery(".rectangle2").hide(); 
      jQuery(".rectangle").show(); 
     } 
     jQuery(".sliding2").hide(); 
    }); 

    jQuery(".menu2").click(function() { 
     jQuery(".sliding2, .all a .rectangle").toggle(); 
     if(jQuery('.sliding2').is(':visible')) { 
      jQuery(".rectangle").hide(); 
      jQuery(".rectangle2").show(); 
     } 
     jQuery(".sliding").hide(); 
    }); 

http://jsfiddle.net/Rino_Raj/k3y4114o/3/

Answer 2

Я изменил свой сценарий, попробуйте следующее: JQuery (документ) .ready (функция() { JQuery (".sliding, .sliding2"). hide(); jQuery (". menu, .menu2"). show(); jQuery (". .rectangle2, .all a. rightangle "). show();

jQuery(".menu").click(function() { 
    jQuery(".sliding, .all a .rectangle2").toggle(); 
    jQuery(".sliding2").hide(); 
    jQuery(".rectangle").show(); 
    jQuery(".rectangle2").hide(); 
    }); 

jQuery(".menu2").click(function() { 
    jQuery(".sliding2, .all a .rectangle").toggle(); 
    jQuery(".sliding").hide(); 
    jQuery(".rectangle").hide(); 
    jQuery(".rectangle2").show(); 
    }); 

});