具有多个显示/隐藏元素和多行的网格

时间：2018-12-20 22:54:20

标签： javascript jquery html css

我正在工作的网站上创建人员列表。我必须以3列连续创建4张图像的网格。在每列下方，可以通过“展开”按钮展开更多信息。

这是我所做的视觉示例：http://www.trusted.dev.creativecatmarketing.online/images/staff-member-list.png

我可以使用带有多个“ if”语句的jquery来将自定义类设置为div元素。然后，我为这些类设置了CSS样式，并且可以进行某些工作……但是我不得不重复两次以上，并且在动画方面似乎有些漏洞。

这是到目前为止我要发生的事情... 

$(document).ready(function() {
  $(".toggle-button").on("click", function() {

    var $this = $(this).toggleClass('expand');
    if ($(this).hasClass('expand')) {
      $(this).text('COLLAPSE');

    } else {
      $(this).text('EXPAND');
    }


    $("#hidden-content-wrap").toggleClass("active");


    if ($(this).hasClass('item1')) {
      $("#content1").toggleClass("active2");
    }
    if ($(this).hasClass('item2')) {
      $("#content2").toggleClass("active2");
    }
    if ($(this).hasClass('item3')) {
      $("#content3").toggleClass("active2");
    }
    if ($(this).hasClass('item4')) {
      $("#content4").toggleClass("active2");
    }

  });
});
p {
  margin: 0px;
  padding: 0px;
}

.staff-wrap {
  background-color: #f5f2f2;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  transition: all 0.5s ease-out;
}

.staff-member {
  flex-grow: 1;
  max-width: 250px;
}

.staff-member img {
  width: 100%;
}

#hidden-content-wrap {
  visibility: hidden;
  transition: all 0.5s ease-out;
  width: 100%;
  height: 0px;
  background-color: #65665d;
}

#hidden-content-wrap.active {
  height: auto;
  visibility: visible;
  transition: all 0.5s ease-in;
}

.hidden-content {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #65665d;
  text-align: center;
  padding: 20px;
}

.active2 .hidden-content {
  height: 100px;
  visibility: visible;
  transition: all 0.5s ease-in;
}

.toggle-button {
  width: 100%;
  background-color: #65665d;
  color: white;
  margin-top: -2px;
  border: none;
  padding: 20px;
  margin-bottom: 0px;
}

.expand {
  padding-bottom: 40px;
}

button {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="staff-wrap">
  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item1">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item2">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item3">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item4">EXPAND</button>
  </div>

</div>


<div id="hidden-content-wrap">
  <div id="content1">
    <div class="hidden-content">
      <p>"hidden content 1”</p>
    </div>
  </div>

  <div id="content2">
    <div class="hidden-content">
      <p>"hidden content 2”</p>
    </div>
  </div>
  <div id="content2">
    <div class="hidden-content">
      <p>"hidden content 3”</p>
    </div>
  </div>

  <div id="content3">
    <div class="hidden-content">
      <p>"hidden content 4”</p>
    </div>
  </div>

  <div id="content4">
    <div class="hidden-content">
      <p>"hidden content 4”</p>
    </div>
  </div>

</div>

<!--
		<div class="staff-wrap">
			staff member 1
			staff member 2
			staff member 3
			staff member 4
		</div>
		
		<div id="hidden-content-wrap">
			hiddent content 1
			hiddent content 2
			hiddent content 3
			hiddent content 4
		</div>
		-->

当打开第二个隐藏内容时，我希望隐藏内容会自动消失。现在，这些元素的位置有点奇怪。

我还必须对其余两行的if语句重复整个过程……

    <!--
    <div class="staff-wrap">
        staff member 1
        staff member 2
        staff member 3
        staff member 4
    </div>

    <div id="hidden-content-wrap">
        hiddent content 1
        hiddent content 2
        hiddent content 3
        hiddent content 4
    </div>
    -->

2 个答案:

答案 0 :(得分：1)

我认为可以在不保存切换元素的情况下改进代码。 

$(document).ready(function() {
  $(".toggle-button").on("click", function() {
    var target = $(this).data("target");
    if ($(this).hasClass("expand")) {
      $(this).toggleClass("expand");
      $(this).text('EXPAND');
      $("#" + target).removeClass("active");
    } else {
      $(".toggle-button").removeClass("expand");
      $(".toggle-button").text("EXPAND");
      $(".hidden-content").removeClass("active");
      
      $(this).toggleClass('expand');
      $(this).text('COLLAPSE');

      $("#" + target).toggleClass("active");
    }

  });
});
p {
  margin: 0px;
  padding: 0px;
}

.staff-wrap {
  background-color: #f5f2f2;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  transition: all 0.5s ease-out;
}

.staff-member {
  flex-grow: 1;
  max-width: 250px;
}

.staff-member img {
  width: 100%;
}

#hidden-content-wrap {
  visibility: hidden;
  transition: all 0.5s ease-out;
  width: 100%;
  height: 0px;
  background-color: #65665d;
}

.hidden-content {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #65665d;
  text-align: center;
}

.active.hidden-content {
  height: 100px;
  visibility: visible;
  transition: all 0.5s ease-in;
  padding: 20px;
}

.toggle-button {
  width: 100%;
  background-color: #65665d;
  color: white;
  margin-top: -2px;
  border: none;
  padding: 20px;
  margin-bottom: 0px;
}

.expand {
  padding-bottom: 40px;
}

button {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="staff-wrap">
  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item1" data-target="content1">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item2" data-target="content2">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item3" data-target="content3">EXPAND</button>
  </div>

  <div class="staff-member">
    <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
    <button class="toggle-button item4" data-target="content4">EXPAND</button>
  </div>

</div>



<div id="content1" class="hidden-content">
  <p>"hidden content 1”</p>
</div>

<div id="content2" class="hidden-content">
  <p>"hidden content 2”</p>
</div>

<div id="content3" class="hidden-content">
  <p>"hidden content 3”</p>
</div>

<div id="content4" class="hidden-content">
  <p>"hidden content 4”</p>
</div>

答案 1 :(得分：0)

您应该保存展开的元素，并在每次点击时对其进行更新

尝试设置变量from functools import partial from PyQt4 import QtGui class MyWin(QtGui.QMainWindow): def __init__(self, parent=None): super(MyWin, self).__init__() central_widget = QtGui.QWidget() self.setCentralWidget(central_widget) vlay = QtGui.QVBoxLayout(central_widget) hlay = QtGui.QHBoxLayout() vlay.addLayout(hlay) vlay.addStretch() self.add_button = QtGui.QToolButton() self.tab_bar = QtGui.QTabBar(self) self.add_button.setIcon(QtGui.QIcon('add.png')) self.add_button.setMenu(self.set_menu()) self.add_button.setPopupMode(QtGui.QToolButton.InstantPopup) self.tab_bar.setTabButton( 0, QtGui.QTabBar.ButtonPosition.RightSide, self.add_button ) hlay.addWidget(self.add_button) hlay.addWidget(self.tab_bar) def set_menu(self): menu_options = ['food', 'drinks', 'snacks'] qmenu = QtGui.QMenu(self.add_button) for opt in menu_options: qmenu.addAction(opt, partial(self.set_new_tab, opt)) qmenu.addAction return qmenu def set_new_tab(self, opt): print(">>> opt clicked on : ", opt) self.tab_bar.addTab(opt) if __name__ == '__main__': import sys app = QtGui.QApplication(sys.argv) w = MyWin() w.show() sys.exit(app.exec_())

，然后将var expandedEl = null;更改为toggleClass和removeClass 

addClass

这是您的示例，但是您需要做更多的工作才能隐藏折叠中的内容：

https://jsfiddle.net/d2w1vb7k/5/

祝你好运！

相关问题
最新问题