HTML主类别下拉列表选择和子类别列表

Question

我已经看到了其他问题，其中select和optgroup被给出，但是在需要更多CSS样式的地方，有没有办法从使用radio inputs创建的菜单中显示子类别？

该片段显示了所需的菜单动画，因此select在此处不起作用。 我将HTML标记更改为radio inputs 。 当选择主类别时，是否可以切换关联的子类别div？

 $(".cat-dropdown .title :input").click(function() { var $menu = $(this) .parent() .siblings(".cat-dropdown-menu"); if ($menu.height() > 0) { closeMenu($menu); } else { openMenu($menu); } }); $(".cat-dropdown-menu .cat-item").click(function() { var $menu = $(this).closest(".cat-dropdown-menu"); closeMenu($menu); $menu .closest(".cat-dropdown") .find(".title span") .text($(this).text()) .css("color", this.style.color); }); function closeMenu($menu) { $list = $menu.children(".cat-list"); $menu.closest(".cat-dropdown").toggleClass("closed"); $menu.css("height", 0); $list.css("top", 0); } function openMenu($menu) { $list = $menu.children(".cat-list"); $menu.closest(".cat-dropdown").toggleClass("closed"); $menu.css({ height: 75 }); } 

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cat-list input { display: none; } .sub-list { display: flex; flex-direction: column; } .main1 { border: 2px solid blue; } .main2 { border: 2px solid red; } .cat-dropdown { margin: 25px; text-align: left; color: #343c3f; border: 1px solid #a2acb0; } .cat-dropdown.closed .cat-dropdown-menu { margin-top: 0px; } .cat-dropdown.closed .cat-dropdown-menu .cat-item { height: 0px; } .cat-dropdown.closed .title { border-bottom: none; } .cat-dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .cat-dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #d9e1e4; } .cat-dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .cat-dropdown .cat-dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box"; } .cat-dropdown .cat-list { position: absolute; top: 0; width: 100%; } .cat-dropdown .cat-list .cat-item { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #d9e1e4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s; } .cat-dropdown .cat-list .cat-item:hover { background-color: #d9e1e4; color: #343c3f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-dropdown closed"> <div class="edit"> <label class="title"> <input class="edit-input1" type="checkbox"><span> Choose...</span> </label> <div class="cat-dropdown-menu"> <div class="cat-list" id="category"> <label class="cat-item" style="color:blue"> <input type="radio" name="cat1">Main 1</label> <label class="cat-item" style="color:red"> <input type="radio" name="cat2">Main 2</label> </div> </div> </div> </div> Sub Category: <div id="subcategory"> <div class="sub-list main1" for="cat1"> <input type="radio" name="sub1" value="opt1">main1 opt1 <input type="radio" name="sub1" value="opt2">main1 opt2 <input type="radio" name="sub1" value="opt3">main1 opt3 </div> <div class="sub-list main2" for="cat2"> <input type="radio" name="sub2" value="opt1">main2 opt1 <input type="radio" name="sub2" value="opt2">main2 opt2 <input type="radio" name="sub2" value="opt3">main1 opt3 </div> </div> 

https://codepen.io/moofawsaw/pen/LmLZeM

Answer 1

我曾经不得不做类似的事情，这就是我提出的：

<script>
  function subselect(cat){
    var select = "";
    if (cat == 1) {
      select = "<select><option value='a1'>a1</ooption><option value='a2'>a2</ooption></select>"
    }else if (cat == 2) {
      select = "<select><option value='b1'>b1</ooption><option value='b2'>b2</ooption></select>"
    }
   document.getElementById("subcategory").innerHTML = select;
  }

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-dropdown closed">
  <div class="edit">
    <label class="title">
<input class="edit-input1" type="checkbox"><span> Choose...</span>
</label>
    <div class="cat-dropdown-menu">
      <div class="cat-list" id="category">
        <label class="cat-item" style="color:blue">
<input type="radio" name="cat" onclick='subselect(1)'>Main 1</label>
        <label class="cat-item" style="color:red">
<input type="radio" name="cat" onclick='subselect(2)'>Main 2</label>
      </div>
    </div>
  </div>
</div>
Sub Category:
<div id="subcategory">
</div>

Answer 2

当选择主类别时，是否可以切换关联的子类别div？

是的，这对我有用：

function toggleSubcatDiv( input ) {
  var name = $( input ).attr( 'name' );

  $( '.sub-list[for="' + name + '"]' )
    .siblings( '.sub-list' )
      .filter( '.active' )
        .removeClass( 'active' )
      .end()
    .end().addClass( 'active' );
}

我在这个闭包中使用function ：

$(".cat-dropdown-menu .cat-item").click(function() {
  var $menu = $(this).closest(".cat-dropdown-menu");
  closeMenu($menu);
  // ... your code here.

  toggleSubcatDiv( $( ':radio', this ) ); // <- here's where I used that function
});

然后我添加了这个自定义CSS ：

.sub-list:not(.active) {
  display: none;
}

因此toggleSubcatDiv()将在子类div （即.sub-list ）的class属性中添加或删除active 。

查看演示https://codepen.io/anon/pen/NMyKvp （PS：我没有改变HTML标记;但是，您可以预先选择主1个 div加入active的class是的div ）。

UPDATE

在回复你的评论时，只要将子类别div放入（或添加到）相同的.container div ，这就应该有效：

function toggleSubcatDiv( input ) {
  var name = $( input ).attr( 'name' );

  $( '.sub-list[for="' + name + '"]' )
    .closest( '.container' )
      .find( '.sub-list.active' )
        .removeClass( 'active' )
      .end()
    .end().addClass( 'active' );
}

所以改变的是，我们现在找到子类别div共享的最近的父/容器。

演示： https ： //codepen.io/anon/pen/LmQoRg

Answer 3

  <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> select optgroup{ display: none; } input.a:checked + input + select optgroup[label=a]{ display: block !important; } input.b:checked + select optgroup[label=b]{ display: block !important; } </style> </head> <body> a<input class="a" type="checkbox" name="sel" value="a"> b<input class="b" type="checkbox" name="sel" value="b"> <select class="" name=""> <optgroup label="a"> <option value="a1">a1</option> <option value="a2">a2</option> </optgroup> <optgroup label="b"> <option value="b1">b1</option> <option value="b2">b2</option> </optgroup> </select> </body> </html> 

这是一个如何使用:checked psuedo选择器更改列表的示例。 使用psuedo选择器时，您需要能够导航到要更改的元素。 我们的input.a必须遍历它的第二个兄弟，但input.b只需要遍历它的第一个。