Question

我有这个代码，当我点击链接时显示一个div：

$(window).load(function(){
    $('.expand-one').click(function(){
        $('.content-one').slideToggle('fast');
    });
})

但问题是我有很多div和链接。如何告诉jquery搜索其对应的div？当我点击<a href="#" class="expand-**one**"></a>时，它会自动展开<div class="content-**one**">，当我点击另一个链接时，它会关闭打开的链接并打开相应的div。我想这样做而不必为每个链接（两个，三个等）执行此操作。

这是我的完整代码

http://jsfiddle.net/4on1exz5/

Answer 1

好吧，如果所有的锚标记都有共同的expand类，并且所有div元素都有共同的content类，并且它们位于其他像这样

<a href="#" class="expand">Open 1</a>
<div class="content">Hello</div>

假设你的content类在CSS文件中有规则来隐藏div或者你可以在div元素上有一个内联style="display:none;"，那么点击超链接，你可以选择下一个div元素并像这样切换

$(document).ready(function(){
    $('.expand').on('click', function(e) {
        e.preventDefault();
        var $div = $(this).next('.content');
        $('.content').not($div).slideUp('slow');
        $div.slideToggle('slow');
    });
});

Answer 2

对你有帮助吗？

HTML

<a href="#" class="expandcommand" id="expandcommand-1">Open 1</a>
<div class="contentexpand" id="contentexpand-2">Hello 2</div>
<a href="#" class="expandcommand" id="expandcommand-2">Open 2</a>
<div class="contentexpand" id="contentexpand-1">Hello 1</div>

JS

$(window).load(function(){
    $('div').hide();
    $('.expandcommand').on('click', function() {
        var contentcontainerid= getContentid($(this).attr('id'));

        $('#' + contentcontainerid).slideToggle('fast');

        function getContentid(expandcommandid) {
            var arrayattr= expandcommandid.split('-');
            return 'contentexpand-' + arrayattr[arrayattr.length - 1];
        }
    });
});

https://jsfiddle.net/jcghdLt1/2/

Answer 3

Demo

HTML

<div class="expand-one expand" data-target=".content-one">expand one</div>
<div class="expand-two expand" data-target=".content-two">expand two</div>
<div class="expand-three expand" data-target=".content-three">expand three</div>
<div class="expand-four expand" data-target=".content-four">expand four</div>

<div class="content-one">one</div>
<div class="content-two">two</div>
<div class="content-three">three</div>
<div class="content-four">four</div>

CSS

.content-one, .content-two, .content-three, .content-four {
    display:none;
    background:red;
}

jquery

$(".expand").click(function(){
    var target = $(this).data("target"); 
     $(target).slideToggle('fast');
});

Answer 4

您希望绑定到<a>点击事件，如下所示：

$(function () {

    $('a').click(function (e) {
        if ($(this).attr('href') == "#") {
            e.preventDefault();
            var className = $(this).attr('class');
            var contentClass = className.replace("expand-", ".content-");
            var exists = $(contentClass).length;
          
            if (exists == 1) { $(contentClass).slideToggle('fast'); }
            
        }
    });

});

.content-one {
    height: 100px;
    width: 100px;
    background-color: pink;
    display: none;
}
.content-two {
    height: 100px;
    width: 100px;
    background-color: black;
    display: none;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="expand-one">Expand 1</a>
<div class="content-one">Content One</div>
<br>
    
<a href="#" class="expand-two">Expand 2</a>
<div class="content-two">Content Two</div>
<br>
    
<a href="www.google.com">A real link<a/>

这样，您不必绑定到每个.expand元素的click事件，并且仍然保留超链接的使用。规定是所有可扩展链接都有href="#"和相应的.content div - 我认为这符合您的请求。

Answer 5

jQuery还提供了更多选择器，您可能会觉得它们很有用。我会研究ID选择器或者比一个类选择器更确定的东西。至少你可以为你的选择器使用更多的上下文 - 所以如果每个链接和div包含在同一个父div中，这与其他link / div组合不同，你可以使用“兄弟”选择器并且更接近办法。你的问题是类选择器获取该类的所有元素，除非你稍微缩小它。

http://api.jquery.com/category/selectors/

使用jquery和链接扩展div

5 个答案: