Question

我的网站上有一个过滤器边栏，其中包含不同的类别，这些类别最初都是隐藏的。当您单击类别时，选项显示，类别旁边的箭头从下到上变化。这工作

当您点击下一个类别时，其他类别应该关闭。这也有效。

什么行不通的是，正在关闭的类别的箭头会变回向下（它们保持不变）。

除此之外，我认为我的代码是大的，应该有一个更简单的方法与$ this但我找不到合适的解决方案。希望有人可以帮助我！

$(document).ready(function() {
  $("div.filterdropdown").each(function() {
    var a = $(this);
    $(".dropdowntitle", a).click(function(i) {
      return i.preventDefault(), $div = $(".dropdowncontent", a), $div.toggle(), $("div.dropdowncontent").not($div).hide(), !1
    })
  })
});

$(document).ready(function() {
  $("div.filterdropdown").each(function() {
    var a = $(this);
    $(".dropdowntitle", a).click(function(i) {
      return i.preventDefault(), $div = $(".fa-chevron-down", a), $div.toggle(), $("div.fa-chevron-down").not($div).hide(), !1
    })
  })
});

$(document).ready(function() {
  $("div.filterdropdown").each(function() {
    var a = $(this);
    $(".dropdowntitle", a).click(function(i) {
      return i.preventDefault(), $div = $(".fa-chevron-up", a), $div.toggle(), $("div.fa-chevron-up").not($div).hide(), !1
    })
  })
});

Answer 1

只需使用JS即可简化。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>

<div class="filter filterdropdown">

  <div class="dropdowntitle">
    <h1>Style</h1>
    <i class="fa fa-chevron-down"></i>
    <i class="fa fa-chevron-up" style="display:none;"></i>
  </div>

  <div class="dropdowncontent" style="display:none;">
    A
  </div>

</div>

<div class="clear"></div>

<div class="filter filterdropdown">

  <div class="dropdowntitle">
    <h1>Accomodation type</h1>
    <i class="fa fa-chevron-down"></i>
    <i class="fa fa-chevron-up" style="display:none;"></i>
  </div>

  <div class="dropdowncontent" style="display:none;">
    B
  </div>

</div>

＆＃13;

check_date = lambda grp: grp.apply(lambda x: x.iloc[x.aStartMonth+2:x.aEndMonth+3].mean(), axis=1).eq(1).all()

＆＃13;

df.groupby('KEY').filter(check_date)
Out[650]: 
      Date1     Date2        KEY  Month1  Month2  Month3  Month4  Month5  \
0  20120304  20120405  100000003       1       1       1       1       1   

   Month6  aEndMonth  aStartMonth  
0       1          4            3

＆＃13;

Answer 2

你可以用一点css来简化这个，例如下面的

HTML：

<div class="filter filterdropdown js-accordion-item">
    <div class="dropdowntitle js-accordion-item-title">
        <h1>Style</h1>
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-chevron-up"></i>
    </div>
    <div class="dropdowncontent">A</div>
</div>

<div class="clear"></div>

<div class="filter filterdropdown js-accordion-item">
    <div class="dropdowntitle js-accordion-item-title">
        <h1>Accomodation type</h1>
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-chevron-up"></i>
    </div>
    <div class="dropdowncontent">B</div>
</div>

CSS：

.filter .fa-chevron-up { display: none; }
.filter .dropdowncontent { display: none; }

.filter.active .fa-chevron-up { display: block; }
.filter.active .fa-chevron-down { display: none; }
.filter.active .dropdowncontent { display: block; }

JS：

function initializeAccordions() {
    $(".js-accordion-item").on("click.accordionItem", ".js-accordion-item-title", function(e) {
        e.preventDefault();
        var $accordionItem = $(this).closest(".js-accordion-item");
        if ($accordionItem.hasClass("active")) {
            $accordionItem.removeClass("active");
        } else {
            $accordionItem.addClass("active").siblings().removeClass("active");
        }
    });
}

$(document).ready(initializeAccordions);

小提琴链接：http://jsbin.com/fukusit/edit?html,css,js,output

Answer 3

$(document).ready(function() {
  $(this).on("click", ".question-div", function() {
    $(".answer-div").hide();
    $(".fa").removeClass('active');
    $(this).parent().find(".answer-div").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});

.question-div-span {
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
      cursor: pointer;
}

.answer-div {
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <!--1-->
    <div class="main-div">
      <div class="question-div">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="question-div-span"> Style </span>
      </div>
      <div class="answer-div">
        A
      </div>
    </div>
    
    <!--2-->
    <div class="main-div">
      <div class="question-div">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="question-div-span"> Accomodation type </span>
      </div>
      <div class="answer-div">
        B
      </div>
    </div>

打开div并关闭所有其他并更改箭头onclick

3 个答案: