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();

    });

})

让我们小提琴！：http://jsfiddle.net/4gMDH/5/

我知道我的jQuery可能相当遥远，但是我已经回到了我最近最接近工作的地方（如果这样做有意义的话！）

我试图让.child-container中的每一行响应点击上面六个集合中的链接。

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

谢谢。

Answer 1

我想你想要这样的东西。将target更改为data-target并将其移至reveal类的元素。我实际上将所有这些都放入<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，{{1 }}。然后它隐藏了所有行（当然只有当前可见的行会向上滑动），最后向下滑动你想要的行。

更新：我还必须从#modules-container-4 CSS中删除display:none，从行中删除#child-container。这是一个小提琴：

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

带有多个目标的jQuery slideDown

1 个答案: