複選框菜單切換

如果checkbox1被選中，則其他應該都不是。如果checkbox2被選中，其他人都不應該。複選框菜單切換

聽起來很簡單吧？那麼我的問題在於我希望能夠切換單個菜單，而且我很難找出它。

$("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

複選框菜單切換

回答

相關問題