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

时间：2018-05-05 02:26:25

标签： javascript jquery html

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

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

＆＃13;
＆＃13; 
radio inputs
＆＃13; 
$(".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
  });
}
＆＃13; 
* {
  -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;
}
＆＃13;
＆＃13;
＆＃13;

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

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

  

是否可以切换关联的子类别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()会在子类别active的{​​{1}}属性中添加或删除class（即div）。

请参阅https://codepen.io/anon/pen/NMyKvp上的演示（PS：我没有更改.sub-list标记;但是，您可以通过添加预先选择 Main 1 HTML div active class。{/ 1>}

<强>更新

在回复您的评论时，只要将子类别div放入（或添加到）同一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' ); } 共享的最近的父/容器。

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

答案 2 :(得分：0)

＆＃13;
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题