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

Question

I am trying to use .slideDown() with multiple classes, but i want only one at a time to toggle/dropdown! 我正在尝试将.slideDown（）与多个类一起使用，但是一次只希望切换/下拉一个！ Because if i run my code currently and i press the button, it will make them all show, instead of only the one i want to show! 因为如果我当前运行我的代码并按下按钮，它将使它们全部显示，而不仅仅是我要显示的代码！ How can i do that? 我怎样才能做到这一点？
my html: 我的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>

My Css: 我的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: 的JavaScript / JQuery的：

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

    });
});

Thank you for your time! 感谢您的时间！

Answer 1

Modify your javascript like this: 像这样修改您的JavaScript：

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

This will choose previous element (related to the button that was clicker -> so your text that you want to show), but only one (above clicked button). 这将选择上一个元素（与单击器上的按钮->有关，因此要显示您的文本），但仅选择一个（单击按钮上方）。 Previously you were referencing all elements with class .text so it wasn't working the way you want. 以前，您是使用.text类引用所有元素的，因此它无法按您想要的方式工作。

Event object contains target property - the button that was clicked and you can use it to get previous element using prev() method. 事件对象包含目标属性-单击的按钮，您可以使用它使用prev（）方法获取先前的元素。 Then you can trigger sliding animation. 然后，您可以触发滑动动画。

jsfiddle 的jsfiddle

Also I'd modify you selector from 我还要从中修改选择器

$(this).click(...)

to 至

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

since you want to target only buttons. 因为您只想定位按钮。 Even better if you add class to those buttons like .click-button and then reference them via 如果将类添加到.click-button等按钮，然后通过引用它们，则更好

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

in case you might want to have some buttons without that effect. 万一您可能需要一些按钮而不产生这种效果。

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

问题描述

1 个解决方案

解决方案1
0 2015-08-02 22:18:59

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

问题描述

1 个解决方案

解决方案1 0 2015-08-02 22:18:59

解决方案1
0 2015-08-02 22:18:59