Question

此网站here有一系列扩展内容区域的超链接。一个接一个地使用上下滑动。

我在jsFiddle上有这段代码here，但它非常麻烦。它不会选择与 <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.3.1</version> </dependency>标记对应的单个div。

任何人都可以指导我实现这种消极效果吗？

jQuery的：

<a>

HTML：

jQuery(function () {
    jQuery('.show').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targ').eq(index).slideDown();
        jQuery('.targ').not(newTarget).slideUp();

    });
});

Answer 1

您遇到的问题是由于您错误地使用了index();所点击的index()元素的<a>是该元素的索引，包括其兄弟<a>和<div>元素;因此，上一个<a>的索引为6，<div>元素集合中的最后一个<div>元素为3。

因此，从逻辑上讲，更正使用index()从<a>兄弟姐妹中找到所点击的<a>的索引将解决问题：

jQuery(function() {
  jQuery('.show').click(function() {

    // here we find the index of the clicked <a> from
    // among its <a> siblings, discarding the <div>
    // elements:
    var index = $(this).index('a'),
      newTarget = jQuery('.targ').eq(index).slideDown();
    jQuery('.targ').not(newTarget).slideUp();

  });
});

jQuery(function() {
  jQuery('.show').click(function() {
    var index = $(this).index('a'),
      newTarget = jQuery('.targ').eq(index).slideDown();
    jQuery('.targ').not(newTarget).slideUp();

  });
});

a,
div {
  display: block;
}

a+div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" target="1">NEWS</a>
<div id="div1" class="targ">Text 1</div>


<a class="show" target="2">ABOUT</a>
<div id="div2" class="targ">Text 2</div>


<a class="show" target="3">MAP</a>
<div id="div3" class="targ">Text 3 </div>


<a class="show" target="4">BUY</a>
<div id="div4" class="targ">Text 4</div>

JS Fiddle demo

一种稍微容易，非索引相关的方法如下：

jQuery(function() {
  jQuery('.show').click(function() {

    // retrieve the number held in the (non-valid) 'target'
    // attribute:
    var targetNumber = $(this).attr('target');

    // concatenate that number with the 'div' prefix (as an
    // id-selector) and use the resulting id to select the
    // element:
    $('#div' + targetNumber)
      // use slideDown() to show that element:
      .slideDown()
      // use the siblings() method to select the
      // siblings matching the supplied selector:
      .siblings('div.targ')
      // and hide those elements, using the
      // slideUp() method:
      .slideUp();
  });
});

jQuery(function() {
  jQuery('.show').click(function() {
    var targetNumber = $(this).attr('target');
    $('#div' + targetNumber).slideDown().siblings('div.targ').slideUp();
  });
});

a,
div {
  display: block;
}

a+div {
  display: none;
}

<a class="show" target="1">NEWS</a>
<div id="div1" class="targ">Text 1</div>


<a class="show" target="2">ABOUT</a>
<div id="div2" class="targ">Text 2</div>


<a class="show" target="3">MAP</a>
<div id="div3" class="targ">Text 3 </div>


<a class="show" target="4">BUY</a>
<div id="div4" class="targ">Text 4</div>

JS Fiddle demo

值得注意的是，如果正确使用HTML元素，您可以利用CSS提供所需的功能，但有一个附带条件。因此，将target属性替换为href属性，并将目标元素的id作为href属性值，允许使用:target要应用于要显示的元素的伪类：

a,
div {
  display: block;
  overflow: hidden;
}

a+div {
  height: 0;
  transition: height 0.4s linear;
}

div:target {
  height: 3em;
}

<a class="show" href="#div1">NEWS</a>
<div id="div1" class="targ">Text 1</div>


<a class="show" href="#div2">ABOUT</a>
<div id="div2" class="targ">Text 2</div>


<a class="show" href="#div3">MAP</a>
<div id="div3" class="targ">Text 3 </div>


<a class="show" href="#div4">BUY</a>
<div id="div4" class="targ">Text 4</div>

JS Fiddle demo

这种方法的唯一问题是，当我们为height设置动画时，我们必须为height属性提供一个相关的长度单位来制作动画。而jQuery的slideUp()，slideDown()和slideToggle()方法都将高度设置为适当高度，以便隐藏，显示或切换元素的内容。但是，根据您的内容的性质，这可能会，也可能不会成为一个交易破坏者。

参考文献：

CSS：
- :target pseudo-class。
jQuery的：
- attr()。
- eq()。
- index()。
- on()。
- siblings()。
- slideDown()。
- slideToggle()。
- slideUp()。

jQuery逐个扩展内容区域DIV

1 个答案: