jQuery переключение открывать / закрывать символы - PullRequest
Новая
       8

jQuery переключение открывать / закрывать символы

0 голосов
/ 29 февраля 2012

Как я могу заставить открытия / закрытия (т.е. стрелки вверх / вниз) работать независимо в следующем коде?Теперь они работают в тандеме, что вводит в заблуждение.Когда я «открываю» продукт A, он должен отображать стрелку вверх или закрытие, что он делает, но также и продукт B, который еще не был «открыт». 

<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

.productDetails {
    display: none;
}
</style>

</head>
<body>
        <table border="1">
            <tr>
              <td><a href="#" class="expandProductDetails">Product A <span>&darr;</span><span style="display: none;">&uarr;</span></a></td>
            </tr>
            <tr class="productDetails">
                <td><strong>Product Philosophy</strong> Aliquam eu velit nibh. In eleifend convallis ante, sit amet semper arcu lobortis vitae.</td>
            </tr>

            <tr>
              <td><a href="#" class="expandProductDetails">Product B <span>&darr;</span><span style="display: none;">&uarr;</span></a></td>
            </tr>
            <tr class="productDetails">
                <td><strong>Product Philosophy</strong> Nunc ac nisi vel leo iaculis feugiat. Quisque blandit tempor vestibulum.</td>
            </tr>
        </table>

<script>
    $('.expandProductDetails').click(function() {

        $(".expandProductDetails span").toggle();

        $(this).closest("tr").next().slideToggle("slow");

    });
</script>

</body>
</html>

Пример работы (в некоторой степени): http://jsfiddle.net/stulk/mqjuR/

1 Ответ

1 голос
/ 29 февраля 2012

Измените это: 

$(".expandProductDetails span").toggle();

на это: 

$(this).children('span').toggle();

$(".expandProductDetails span") цели каждый элемент, который имеет класс expandProductDetails (и впоследствии выбираетдочерние элементы span этих элементов. Вы хотите настроить таргетинг на дочерние элементы span только элемента, по которому щелкнули, который в контексте вашего события щелчка имеет значение this.

Обновленный пример

...