在我使用11 bootstrap 3折叠的页面中,如果我单击第二个折叠,则仅需进行一次扩展,第一个应关闭,第二个应扩展。
但是在我看来,这两种崩溃都在扩大。
我尝试添加 product_images = ['first_icon.png',
'second_icon.png',
'third_icon.png']
self.vbox_choice_img = QHBoxLayout()
for image in product_images:
label = QLabel()
pixmap = QtGui.QPixmap(image)
pixmap = pixmap.scaled(250, 250)
label.setPixmap(pixmap)
label.setAlignment(QtCore.Qt.AlignHCenter)
label.mousePressEvent = self.on_product_clicked
self.vbox_choice_img.addWidget(label)
def on_product_clicked(self, event, <WHICH_QLABEL_WAS_CLICKED>):
pass
但无济于事
followed all instruction given in Stack Overflow Answer
我使用了HTML属性方法
HTML
role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
答案 0 :(得分:2)
我建议使用JavaScript来切换他们想要的方式。我在这里所做的事情:在您的块div中添加了toggle
类,这使每当打开切换块时,JavaScript侦听器即可折叠所有其他块。
$(".collapse.in").collapse('hide');
将找到所有需要折叠的块并将其折叠。
我在一个效率不高的解决方案中留下了注释:$(this).parent().parent().parent()...
,因为我希望它可以向您展示如何导航所有包含div的工作。
如果在已打开的块中单击,则if语句if ( !$(this).find(".panel-collapse").hasClass('in') )
可防止崩溃。
$( function() {
$('.toggle').click(function() {
if ( !$(this).find(".panel-collapse").hasClass('in') ) {
$(".collapse.in").collapse('hide');
//$(this).parent().parent().parent().find('.collapse.in').collapse('hide');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="myGroup" class="container">
<h1>Select Category</h1>
<div class="panel">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div>
<div id="collapseone" class="panel-collapse collapse">
<a href="#" class="list-group-item">Car</a>
<a href="#" class="list-group-item">Bus, Van, Truck</a>
<a href="#" class="list-group-item">Industrial Vehicle</a>
<a href="#" class="list-group-item">Motorcycles</a>
<a href="#" class="list-group-item">Bicycles</a>
<a href="#" class="list-group-item">Spare Parts</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div>
<div id="collapsetwo" class="panel-collapse collapse">
<a href="#" class="list-group-item">Mobiles</a>
<a href="#" class="list-group-item">Tablets</a>
<a href="#" class="list-group-item">Ipads</a>
<a href="#" class="list-group-item">Accessories</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div>
<div id="collapsethree" class="panel-collapse collapse">
<a href="#" class="list-group-item">Notes</a>
<a href="#" class="list-group-item">Coins</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div>
<div id="collapsefour" class="panel-collapse collapse">
<a href="#" class="list-group-item">Computer & Laptops</a>
<a href="#" class="list-group-item">TVs, Audio and Video</a>
<a href="#" class="list-group-item">Computer Accessories</a>
<a href="#" class="list-group-item">ACs</a>
<a href="#" class="list-group-item">Washing Machines</a>
<a href="#" class="list-group-item">Fridge</a>
<a href="#" class="list-group-item">Camera and Lens</a>
<a href="#" class="list-group-item">Kitchen Accessories</a>
<a href="#" class="list-group-item">Games and Entertainment</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div>
<div id="collapsefive" class="panel-collapse collapse">
<a href="#" class="list-group-item">For Sale</a>
<a href="#" class="list-group-item">For Rent</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div>
<div id="collapsesix" class="panel-collapse collapse">
<a href="#" class="list-group-item">Men</a>
<a href="#" class="list-group-item">Women</a>
<a href="#" class="list-group-item">Kids</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div>
<div id="collapseseven" class="panel-collapse collapse">
<a href="#" class="list-group-item">Driver and Taxi</a>
<a href="#" class="list-group-item">Education and Classes</a>
<a href="#" class="list-group-item">Electonics and Computer</a>
<a href="#" class="list-group-item">Health and Beauty</a>
<a href="#" class="list-group-item">Gym and Fitness</a>
<a href="#" class="list-group-item">Sports and Equipment</a>
<a href="#" class="list-group-item">Other Services</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div>
<div id="collapseeight" class="panel-collapse collapse">
<a href="#" class="list-group-item">Dogs</a>
<a href="#" class="list-group-item">Cats</a>
<a href="#" class="list-group-item">Fishes and Aquarium</a>
<a href="#" class="list-group-item">Food & Accessories</a>
<a href="#" class="list-group-item">Other Pets</a>
</div>
</div>
</div>
<div class="row">
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div>
<div id="collapsenine" class="panel-collapse collapse">
<a href="#" class="list-group-item">Books</a>
<a href="#" class="list-group-item">Online Tutorials</a>
<a href="#" class="list-group-item">Tutions</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div>
<div id="collapseten" class="panel-collapse collapse">
<a href="#" class="list-group-item">Male</a>
<a href="#" class="list-group-item">Female</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12 toggle">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div>
<div id="collapseelven" class="panel-collapse collapse">
<a href="#" class="list-group-item">Data Entry & Back Office</a>
<a href="#" class="list-group-item">BPO and Telecaller</a>
<a href="#" class="list-group-item">Sales and Marketing</a>
<a href="#" class="list-group-item">Operator and Technician</a>
<a href="#" class="list-group-item">Cook</a>
<a href="#" class="list-group-item">Driver</a>
<a href="#" class="list-group-item">Hotel and Travel Execute</a>
<a href="#" class="list-group-item">IT Engineer and Developer</a>
<a href="#" class="list-group-item">Design</a>
<a href="#" class="list-group-item">Office Assistant</a>
<a href="#" class="list-group-item">Reception and Front Office</a>
<a href="#" class="list-group-item">Delivery and Collection</a>
<a href="#" class="list-group-item">Accountant</a>
<a href="#" class="list-group-item">Teacher</a>
<a href="#" class="list-group-item">Other Jobs</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
希望此解决方案能够满足您的需求!让我知道您是否还有其他问题。
答案 1 :(得分:1)
UPD。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="myGroup" class="container">
<h1>Select Category</h1>
<div class="panel">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 ">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div>
<div id="collapseone" class="panel-collapse collapse">
<a href="#" class="list-group-item">Car</a>
<a href="#" class="list-group-item">Bus, Van, Truck</a>
<a href="#" class="list-group-item">Industrial Vehicle</a>
<a href="#" class="list-group-item">Motorcycles</a>
<a href="#" class="list-group-item">Bicycles</a>
<a href="#" class="list-group-item">Spare Parts</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div>
<div id="collapsetwo" class="panel-collapse collapse">
<a href="#" class="list-group-item">Mobiles</a>
<a href="#" class="list-group-item">Tablets</a>
<a href="#" class="list-group-item">Ipads</a>
<a href="#" class="list-group-item">Accessories</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div>
<div id="collapsethree" class="panel-collapse collapse">
<a href="#" class="list-group-item">Notes</a>
<a href="#" class="list-group-item">Coins</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div>
<div id="collapsefour" class="panel-collapse collapse">
<a href="#" class="list-group-item">Computer & Laptops</a>
<a href="#" class="list-group-item">TVs, Audio and Video</a>
<a href="#" class="list-group-item">Computer Accessories</a>
<a href="#" class="list-group-item">ACs</a>
<a href="#" class="list-group-item">Washing Machines</a>
<a href="#" class="list-group-item">Fridge</a>
<a href="#" class="list-group-item">Camera and Lens</a>
<a href="#" class="list-group-item">Kitchen Accessories</a>
<a href="#" class="list-group-item">Games and Entertainment</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div>
<div id="collapsefive" class="panel-collapse collapse">
<a href="#" class="list-group-item">For Sale</a>
<a href="#" class="list-group-item">For Rent</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div>
<div id="collapsesix" class="panel-collapse collapse">
<a href="#" class="list-group-item">Men</a>
<a href="#" class="list-group-item">Women</a>
<a href="#" class="list-group-item">Kids</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div>
<div id="collapseseven" class="panel-collapse collapse">
<a href="#" class="list-group-item">Driver and Taxi</a>
<a href="#" class="list-group-item">Education and Classes</a>
<a href="#" class="list-group-item">Electonics and Computer</a>
<a href="#" class="list-group-item">Health and Beauty</a>
<a href="#" class="list-group-item">Gym and Fitness</a>
<a href="#" class="list-group-item">Sports and Equipment</a>
<a href="#" class="list-group-item">Other Services</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div>
<div id="collapseeight" class="panel-collapse collapse">
<a href="#" class="list-group-item">Dogs</a>
<a href="#" class="list-group-item">Cats</a>
<a href="#" class="list-group-item">Fishes and Aquarium</a>
<a href="#" class="list-group-item">Food & Accessories</a>
<a href="#" class="list-group-item">Other Pets</a>
</div>
</div>
</div>
<div class="row">
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div>
<div id="collapsenine" class="panel-collapse collapse">
<a href="#" class="list-group-item">Books</a>
<a href="#" class="list-group-item">Online Tutorials</a>
<a href="#" class="list-group-item">Tutions</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div>
<div id="collapseten" class="panel-collapse collapse">
<a href="#" class="list-group-item">Male</a>
<a href="#" class="list-group-item">Female</a>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div>
<div id="collapseelven" class="panel-collapse collapse">
<a href="#" class="list-group-item">Data Entry & Back Office</a>
<a href="#" class="list-group-item">BPO and Telecaller</a>
<a href="#" class="list-group-item">Sales and Marketing</a>
<a href="#" class="list-group-item">Operator and Technician</a>
<a href="#" class="list-group-item">Cook</a>
<a href="#" class="list-group-item">Driver</a>
<a href="#" class="list-group-item">Hotel and Travel Execute</a>
<a href="#" class="list-group-item">IT Engineer and Developer</a>
<a href="#" class="list-group-item">Design</a>
<a href="#" class="list-group-item">Office Assistant</a>
<a href="#" class="list-group-item">Reception and Front Office</a>
<a href="#" class="list-group-item">Delivery and Collection</a>
<a href="#" class="list-group-item">Accountant</a>
<a href="#" class="list-group-item">Teacher</a>
<a href="#" class="list-group-item">Other Jobs</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
.panel
块的子元素。因此,您需要更改布局或编写自己的脚本,而不要使用HTML属性。