0
私はアプリケーションを作成している、食品のメニューがたくさんありますが、特定の食品アイテム、詳細をクリックしながら、食品イメージのパネルの下に開く必要があります。パネルの内側には、アコーディオンがありますアコーディオンはアコーディオンを伸ばしたり崩壊させたり、発射したりしない。JQueryダイレクトイベントは、onclickのようなデリゲートハンドライベント以外は起動しませんか？
私は、portfolio_descriptionというクラスの下でjqueryのクリックイベントをテストしようとしました。クラス内で、Jqのクリックイベントは発生しません.Showとhideも動作していません。しかし、Delegateハンドラが起動しています。
grid.jsから何かが停止しています
このportfolio_descriptionクラスは、画像をクリックしている間、grid.jsおよびmain.jsで使用されています。詳細は、アコーディオン本体、そのサードパーティ製プラグインの詳細とともに表示する必要があります。
アコーディアンをクリックすると、そのグリッドが消滅し、grid.js内のいくつかの動的要素の作成が展開と折りたたみを停止します。
注：クラスを削除すると、そのクラスが放棄されます。ここで <div id="ss" class="portfolio_description">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dish App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="modernizr-2.6.2.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
panel-group {
margin-top: 20px;
}
.panel-group .panel {
border-radius: 0;
background-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: inherit;
position: relative;
border: none;
border-radius: 0;
padding: 0;
}
.panel-title > a {
font-size: 14px;
text-transform: none;
display: block;
padding: 23px 40px 23px 30px;
background-color: #39adff;
color: #fff !important;
}
.panel-title {
font-size: 20px;
text-transform: none;
font-weight: 400;
padding: 0;
position: relative;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
padding-top: 37px;
padding-bottom: 22px;
padding-left: 37px;
border-top: none;
background-color: #f0f3f5;
}
</style>
</head>
<body>
<section id="dishes">
<div class="container">
<div class="row ">
<div class="col-sm-12">
<h2 class="head-title text-center to_animate" data-animation="slideDown">Our Best Dishes</h2>
</div>
</div>
<div class="row">
<ul id="gallery-grid" class="gallery-grid col-sm-12">
<li>
<a href="#" data-largesrc="http://bed56888308e93972c04-0dfc23b7b97881dee012a129d9518bae.r34.cf1.rackcdn.com/sites/default/files/veggie-heart.jpg" data-title="Project Name 1" data-description="data-description">
<img src="http://bed56888308e93972c04-0dfc23b7b97881dee012a129d9518bae.r34.cf1.rackcdn.com/sites/default/files/veggie-heart.jpg" alt="" />
</a>
<div id="ss" class="portfolio_description">
<div class="block">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">
Our staff
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt enim eiusmod high life accusamus terry richardson.
</p>
</div>
</div>
</div>
</div>
<button id="sss" class="btn btn-success" value="clickme"> clickme</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<script src="jquery.isotope.min.js"></script>
<script src="grid.js"></script>
<script src="plugins.js"></script>
<script src="main.js"></script>
<script>
$(document).ready(function() {
$(document).on("click","#sss",function() {
alert("ss");
});
});
</script>
</body>
</html>
plunkerのデモです。
デモを実行している間に、コードパネルを左に移動するか、コードパネルを左に移動してサンプルを実行してください。デモを見るときれいにすることができます。 https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview
、おかげで、その作業が、私は削除すると、拡大し、ブロックの下に、ブートストラップアコーディオンを折りたたむことができませんクラス** portfolio_description **、その作業..ここを参照[リンク]（https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview） –