Question

我正在尝试将.slideDown（）与多个类一起使用，但我一次只想要一个切换/下拉！因为如果我现在运行我的代码并按下按钮，它将使它们全部显示，而不是仅我想要显示的那个！我怎样才能做到这一点？我的HTML：

    <!doctype HTML>
<head>
    <title>Ricoz.co.uk Rp Directory</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script rel="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
    <div class="navbar"></div>
    <div class="char">
    <div class="picture"></div>
    <div class="text">
    here is some text!</div>
    <button>test</button>
    </div>
    <div class="char">
    <div class="picture"></div>
    <div class="text">
    here is some text!</div>
    <button>test</button>
    </div>


</body>

我的Css：

body{
    background-image: url(tb.jpg);
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px
}
.navbar{
    border: 1px solid black;
    height: 50px;
}
.row{
    height: 440px;

}
.char{
/*  border-radius: 20px; */
    background-color: white;
    width: 200px; 
    margin: 20px;
    float: left;

}
.char  > .picture{
    width:200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 200px;
}
.text{
    width:200px;
    height: 150px;
}

JavaScript / JQuery：

$(document).ready(function(){
    $('.text').hide();
    $(this).click(function(){
        $('.text').slideToggle();

    });
});

谢谢你的时间！

Answer 1

像这样修改你的javascript：

$(document).ready(function(){
    $('.text').hide();
    $(this).click(function(event){
        $(event.target).prev().slideToggle();
    });
});

这将选择上一个元素（与单击按钮相关的＆gt;以及您要显示的文本），但只选择一个（上面点击的按钮）。以前，您使用类.text引用所有元素，因此它不能按您希望的方式工作。

Event object包含target属性 - 单击的按钮，您可以使用它来使用prev()方法获取上一个元素。然后你可以触发滑动动画。

jsfiddle

此外，我也会从

修改你的选择器

$(this).click(...)

到

$('button').click(...)

因为您只想定位按钮。如果你将类添加到像.click-button这样的按钮然后通过

引用它们，那就更好了

$('button.click-button').click(...)

如果你想要一些没有这种效果的按钮。

尝试将jquery .slideDown（）与多个类一起使用

1 个答案: