Checkbox Menu Toggle

Если флажок установлен, ни один из остальных не должен быть. Если checkbox2 проверен, ни один из них не должен быть.Checkbox Menu Toggle

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

$("label").on("click", function() { 
 
    $(this).toggleClass("active") 
 
})

.d1, .d2, .d3 { 
 
    display: none; 
 
} 
 

 
#d1:checked ~ .d1 { 
 
    display: block; 
 
} 
 
#d2:checked ~ .d2 { 
 
    display: block; 
 
} 
 
#d3:checked ~ .d3 { 
 
    display: block; 
 
} 
 

 
.active { 
 
    color: #6d4dfe; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="menubar" id="d1"> 
 
<label for="d1">Open 1</label> 
 
<input type="checkbox" name="menubar" id="d2"> 
 
<label for="d2">Open 2</label> 
 
<input type="checkbox" name="menubar" id="d3"> 
 
<label for="d3">Open 3</label> 
 

 
<div class="d1"><div class="hi">Lorem ipsum dolor.</div></div> 
 
<div class="d2">Lorem ipsum dolor sit amet.</div> 
 
<div class="d3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>

источник

2016-04-15 Michael Schwartz

@ freestock.tk, он может хотеть, чтобы иметь возможность, снимите с коробка. В противном случае переключатели - это путь. –

Если у вас есть какая-то причина предпочесть флажки радио, я считаю, что это будет делать то, что вы хотите:

$("input:checkbox").on("change", function() { 
 
    $(this).toggleClass("active"); 
 
    $("input:checkbox").not(this).removeClass("active").prop('checked', false); 
 
})

.d1, .d2, .d3 { 
 
    display: none; 
 
} 
 

 
#d1:checked ~ .d1 { 
 
    display: block; 
 
} 
 
#d2:checked ~ .d2 { 
 
    display: block; 
 
} 
 
#d3:checked ~ .d3 { 
 
    display: block; 
 
} 
 

 
.active { 
 
    color: #6d4dfe; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="menubar" id="d1"> 
 
<label for="d1">Open 1</label> 
 
<input type="checkbox" name="menubar" id="d2"> 
 
<label for="d2">Open 2</label> 
 
<input type="checkbox" name="menubar" id="d3"> 
 
<label for="d3">Open 3</label> 
 

 
<div class="d1"><div class="hi">Lorem ipsum dolor.</div></div> 
 
<div class="d2">Lorem ipsum dolor sit amet.</div> 
 
<div class="d3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>

источник

2016-04-15 22:58:56 David784

Должно быть что-то вроде этого:

<html> 
<head> 
    <style> 
     ul{ 
      float: left; 
      overflow: hidden; 
      height: auto; 
      display: none; 
      background-color: red; 
     } 
     #CheckMe:checked ~ #CM{ 
      display: block; 
     } 

     #CheckMeToo:checked ~ #CMT{ 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div style="position:relative;"> 
    <input type="radio" name="Menu" id="CheckMe" checked="checked"> 
    <input type="radio" name="Menu" id="CheckMeToo"> 
    <label for="CheckMe">press me</label> 
    <ul id="CM"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
    </ul> 
    <ul id="CMT"> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
     <li>10</li> 
     <li>11</li> 
     <li>12</li> 
    </ul> 
    </div> 
</body> 
</html>

Там нет причин использовать JavaScript, к JQuery или флажков, если вы хотите что-то, чтобы показать, в зависимости от того, что установлен флажок. Радиакокс с таким же именем позволяет только проверять один из них, так что да.

источник

2016-04-15 22:56:21 jAndersen

Checkbox Menu Toggle

ответ

Смежные вопросы