jquery - 新しいドロップダウンが選択されたときにjQueryドロップダウンボックスを閉じる/jqueryコードをクリーンアップする

Question

解決しようとしている問題の画像と、以下のすべてのコードを含めました。
(スクリプトボックスではなく) コード自体の下に投稿されたコードについて質問があります。
どんな助けでも大歓迎です。

HTML スクリプト

<section id="s-explore">
    <div class="pagebreak">
        <span>The Lifestyle</span>
        <i class="down">&lt;</i>
    </div>
    <!-- Layout for Columns -->
    <div class="wrapper layout">
        <!-- Column Home 1 -->
        <div class="col">
            <div class="media">
                <img id="d1" src="images/main.png" width="318" height="269" alt="" />
                <div class="contenthover">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                    <p><a href="#" id="dropbox1" class="mybutton">Lorem ipsum</a></p>
                </div>
                <div class="body">
                    <h1></h1>
                    <h2><br /></h2>
                </div>
            </div>
        </div>
        <!-- Column Home 2 -->
        <div class="col">
            <div class="media">
                <img id="d1" src="images/red.png" width="318" height="269" alt="" />
                <div class="contenthover">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                    <p><a href="#" id="dropbox2" class="mybutton">Lorem ipsum</a></p>
                </div>
            </div>
            <div class="body">
                <h1><a href="#"></a></h1>
                <h2><br></h2>
            </div>
        </div>
        <!-- Column Home 3 -->
        <div class="col">
            <div class="media">
                <img id="d1" src="images/car.png" width="318" height="269" alt="" />
                <div class="contenthover">
                    <h3>Lorem ipsum dolor</h3>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                    <p><a href="#" id="dropbox3" class="mybutton">Lorem ipsum</a></p>
                </div>
            </div>
            <div class="body">
                <h1><a href="news.html"></a></h1>
                <h2><br></h2>
            </div>
        </div>
    </div>
    <div id="box1">
        <a href="#" class="close">[x]</a>
        <p>This is test box number one</p>
    </div>
    <div id="box2">
        <a href="#" class="close">[x]</a>
        <p>This is test box number two</p>
    </div>
    <div id="box3">
        <a href="#" class="close">[x]</a>
        <p>This is test box number three</p>
    </div>
</section>

これはjQueryスクリプトです

<!-- js hover over image -->    

<script>
   $(function(){
       $(' #d1').contenthover({
           overlay_width:300,
           overlay_height:150,
           effect:'slide',
           slide_direction:'bottom',
           overlay_x_position:'center',
           overlay_y_position:'bottom',
           overlay_background:'#000',
           overlay_opacity:0.8
      });   
   });
</script>

<!-- js for drop down box1 -->
<script>
    $(function () {
        $("#dropbox1").click(function (event) {
            event.preventDefault();
            $("#box1" ).slideToggle();
        });
        $("#box1 a").click(function (event) {
            event.preventDefault();
            $("#box1").slideUp();
        });
    });
</script>

<!-- js for drop down box2 -->    
<script>
    $(function () {
        $("#dropbox2").click(function (event) {
            event.preventDefault();
            $("#box2").slideToggle();
        });

        $("#box2 a").click(function (event) {
            event.preventDefault();
            $("#box2").slideUp();
        });
    });
</script>

<!-- js for drop down box3 -->
<script>
    $(function () {
        $("#dropbox3").click(function (event) {
            event.preventDefault();
            $("#box3").slideToggle();
        });

        $("#box3 a").click(function (event) {
            event.preventDefault();
            $("#box3").slideUp();
        });
    });
</script>

ドロップダウンボックスごとに個別のスクリプトを用意する必要がないように、このjQueryコードをクリーンアップする方法はありますか?

まあ、私はここで十分に高い担当者をまだ持っていないので、画像を投稿することは許可されていないと思いますが、いつかできるようになるでしょう:)

現在、3 つのドロップダウン領域をすべて選択すると、それらが次々に表示されます。ドロップダウンボックスの 1 つが選択されたときに、ユーザーが最初の 2 番目のボタンをクリックして他のボタンに移動するとよいでしょう。ドロップダウンが閉じ、新しいボックスが開きます。

これはcssスクリプトです

section .wrapper {
    position: relative;
    zoom: 1;
}
section .wrapper:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: ".";
}
section .wrapper.layout {
    width: 960px;
    margin: 0 auto;
    padding: 95px 90px;
}
section .wrapper .fg {
    z-index: 200;
}
section .pagebreak {
    position: absolute;
    top: 0;
    left: 120px;
    line-height: 1;
    text-transform: uppercase;
    color: #272727;
    display: inline-block;
    z-index: 300;
    zoom: 1;
}
section .pagebreak:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: ".";
}
section .pagebreak span {
    padding: 14px 14px 14px 0;
    display: block;
    float: left;
}
section .pagebreak i {
    width: 16px;
    padding: 14px 14px 8px;
    display: block;
    float: left;
    border-left: 1px dotted #272727;
    font-style: normal;
    font-family: 'dinliga-medium';
}
#s-explore {
    background: #fff;
}
#s-explore .wrapper .col {
    float: left;
    width: 318px;
    height: 269px;
    background: #000;
    margin-right: 2px;
    cursor: pointer;
    position: relative;
}
#s-explore .wrapper .col .media {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 318px;
    height: 269px;
}
#s-explore .wrapper .col .body {
    padding: 20px 0;
    position: absolute;
    top: 477px;
    left: 0px;
    width: 100%;
}
#s-explore .wrapper .col .body.hover {
    top: 150px;
}
#s-explore .wrapper .col h1,
#s-explore .wrapper .col h2 {
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}
#s-explore .wrapper .col h1 a:hover,
#s-explore .wrapper .col h2 a:hover {
    ![issue with the drop down][1]  text-decoration: none;
}

score 0 · Accepted Answer

基本的に、要素を反復処理して bind イベントを設定します。

var elementCount = 5;
for(var i = 0; i < elementCount; i++){
    $("#dropbox" + i).bind('click', function (event) {
        event.preventDefault();
        $("#box" + i).slideToggle();
    });

    $("#box" + i + " a").bind('click', function (event) {
        event.preventDefault();
        $("#box" + i).slideUp();
    });
}

elementCountがドロップダウンの数に等しい場所でそれを行う必要があります。

編集：

CSS が変わらない限り、dropbox1 と box1 を使用することは、あまり良いプログラミング手法ではないことに注意してください。クラスを設定してこれを行う方がよいでしょう：

$('.class').bind('click', function(){
    preventDefault();
    var box = $(this).next('.box');
    box.slideToggle();
    box.find('a').bind('click', function(){
        preventDefault();
        box.slideUp();
    });
});

ただし、HTML を少し変更する必要があります。

<div class="class"></div>
<div class="box">
    <a href="#">Text</a>
</div>

このメソッドは、クリックされた項目を取得し、直後のボックス要素を見つけて、そのバインディングを設定します。

ここにあなたのためのいくつかの参照があります：

$.next()

$.find()

jquery - 新しいドロップダウンが選択されたときにjQueryドロップダウンボックスを閉じる/jqueryコードをクリーンアップする

1 に答える 1

Related

Reference