具有多个目标的 jQuery SlideDown

Question

我希望有人能帮助我正确完成这项工作。

我有这个 HTML:

    <div id="courses_container" class="row">
    <div class="section group">
        <div class="col one-third">
            <p class="mod-count">1</p>
            <p class="reveal"><a class="modselect" target="4">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">2</p>
            <p class="reveal"><a class="modselect" target="5">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">3</p>
            <p class="reveal"><a class="modselect" target="6">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">4</p>
            <p class="reveal"><a class="modselect" target="7">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">5</p>
            <p class="reveal"><a class="modselect" target="8">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">6</p>
            <p class="reveal"><a class="modselect" target="9">view modules</a></p>
        </div>
    </div>
</div>

<div id="child-container">
    <div class="row first" id="modules-container-4">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 4</p></div>
        </div>
    </div> 
    <div class="row" id="modules-container-5">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 5</p>
            <p>SOME OF THESE WILL HAVE LONGER CONTENT</p></div>
        </div>
    </div>
    <div class="row" id="modules-container-6">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 6</p>
            <p>SOME OF THESE WILL HAVE LONGER CONTENT</p>
            <p>AND THE CONTENT OF SOME WILL BE LONGER STILL</p></div>
        </div>
    </div>
    <div class="row" id="modules-container-7">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 7</p></div>
        </div>
    </div>
</div>

这个CSS:

#child-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    display: none;
}

#child-container p {
    color: #fff;
    font-size: 1em;
    line-height: 1.1em;
    text-align: center;
}

#child-container .row:not(.first) {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

#child-container .row.first {
    display: block;
}


.row {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.section {
    clear: both;
    padding: 0;
    margin: 0;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.group:before,
.group:after {
    content:"";
    display:table;
}

.group:after {
    clear:both;
}

.fw {
    width: 100%;
}

#courses_container .one-third:nth-child(4n+0) {
    margin-left: 0;
}

.one-third {
    width: 32.26%;
}

还有这个 jQuery:

(function ($) {
    $(document);
}(jQuery));

jQuery(document).ready(function() {

    jQuery('.reveal').on('click', function(){

        jQuery('#child-container').slideDown();

    });

})

我们来拉 fiddle 吧! : http://jsfiddle.net/4gMDH/5/

我知道我的 jQuery 可能还很遥远，但我已经回溯到上次最接近工作的地方(如果这有意义的话!)

我试图让 .child-container 中的每一行响应对其上方六组链接中的链接的点击。

每次点击链接时，我希望在显示下一个 div 之前隐藏之前选择的 div。

谢谢。

Answer 1

我想你想要这样的东西。更改target至data-target并将其移动到带有 reveal 的元素类(class)。我实际上会将所有这些放入 <a>元素而不是 <p>

<a class="reveal" data-target="4">

然后在你的 jQuery 中:

jQuery('.reveal').on('click', function(e) {
  e.preventDefault();
  var target = jQuery(this).data('target');
  var childid = '#modules-container-'+target;
  jQuery('#child-container > .row').slideUp();
  jQuery(childid).slideDown();
});

它的作用是获取 data-target 的值从您刚刚单击的链接中获取，例如 4。它附加此值以获取您要显示的行的 id，#modules-container-4 。然后它隐藏所有行(当然只有当前可见的行会向上滑动)，最后向下滑动您想要的行。

更新:我还必须删除 display:none来自#child-container CSS 和 position:absolute从行中。这是一个 fiddle :

http://jsfiddle.net/CSL65/1/