zakaryfaithfull Ответов: 4

Показать / Скрыть DIV с помощью JQuery

В настоящее время я пытаюсь реализовать технику show/hide с помощью JQuery на своих страницах продуктов.

Идея:

Я хочу показать все изображения моего продукта с помощью кнопки "Показать описание" для каждого. При нажатии на эту кнопку будет отображено описание соответствующего продукта.

В настоящее время, когда я нажимаю ссылку "Показать описание" для продукта, она показывает описание div для всех продуктов на странице. Я просто хочу, чтобы отображалось соответствующее описание, а не все описания div.

JavaScript в заголовке:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".productDescription").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });

});

</script>



HTML:

<div class="product clearfix">

<h4>Bath Bomb Cake Slice - Melting Heart</h4>

<p>Drizzled with soap this Bath Bomb Cake Slice looks so authentic.</p>

<a href="#" class="show_hide">See Full Description</a>
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. <a href="#" class="show_hide">Hide</a></p></div>

</div>

<div class="product clearfix">

<h4>Cupcake Bath Bomb - La Vie en Rose</h4>

<p>Muffin Size in it's own Cake Box, this is the most elegant cupcake bathbomb.</p>

<a href="#" class="show_hide">See Full Description</a>
<div class="productDescription">
<p>Muffin Size in it's own Cake Box, this is the most elegant and luxurious handmade cupcake bathbomb bath treat as it contains pure essential oils of lavender and rose. Perfect for those who need to unwind and want a bit of indulgence.<br/>
If you think this Bath-Patisserie creation is too pretty to use, place it on your bathroom shelf and let the aromas fill the room!<br/>
<b>Ingredients:</b>
Sodium Bicarbonate, Citric Acid, Sucrose, Aqua, Egg Powder (Ovum), Prunus Amygdalus Dulcis, Sodium Lauryl Sulphate, Lavandula Officinalis, Rosa damascena, Potassium Bitartrate, Hamamelis Virginiana Distillate, GERANIOL, LIMONENE, LINALOOL, CITRAL, EUGENOL, CITRONELLOL, FARNESOL. <a href="#" class="show_hide">Hide</a></p></div>
</div>

4 Ответов

Рейтинг:
32

Mohamed Mitwalli

Привет ,
Проверить это
http://www.electrictoolbox.com/show-hide-element-with-jquery-part-1/[^]
с уважением
М. Митвалли

Рейтинг:
2

Miroslav Sommer

Лучший подход для отображения / скрытия элементов - это комбинация HTML, CSS и JavaScript. Если вы хотите что-то скрыть, найдите подходящий родительский элемент и назначьте ему класс флага "hidden". Тогда вы можете легко контролировать, какие элементы внутри родителя должны быть скрыты. Если вы хотите показать, то просто удалите" скрытый " флаг класса.

Видеть
http://jsfiddle.net/TEXYa/[^]

Класс флага " hidden "называется" hide_description "и присваивается"продукту".

Код JavaScript тогда очень прост и понятен:

$(document).ready(function(){

    $(".show").click(function() {
        $(this).parents(".product").removeClass("hide_description");
    });
    $(".hide").click(function() {
        $(this).parents(".product").addClass("hide_description");
    });
 
});
​


Одна хорошая вещь в этом подходе заключается в том, что вы можете не только скрывать/показывать элементы, но и устанавливать любые дополнительные атрибуты на основе флага "скрытый". например, если продукт или описание должны использовать фоновое изображение, чтобы отразить показанное/скрытое состояние (например, значок плюс/минус), то вы можете просто обновить соответствующий CSS для этого, без необходимости писать дополнительный код JavaScript.

Модифицированный HTML-код:
<div class="product clearfix hide_description">
<h4>Bath Bomb Cake Slice - Melting Heart</h4>
<p>Drizzled with soap this Bath Bomb Cake Slice looks so authentic.</p>

<a href="#" class="show">See Full Description</a>
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. 
<a href="#" class="hide">Hide</a>
</p></div>
</div>


Связанный CSS:
.productDescription {display:block;}
.hide_description .productDescription {display:none;}
.show {display:none;}
.hide {display:inline;}
.hide_description .show {display:inline;}
.hide_description .hide {display:none;}

[no name]

да

Рейтинг:
1

ShotDriller 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
        $(".productDescription").hide();
        $(".show_hide").show();
        $(".hide_show").hide();

    $('.show_hide').click(function(){
    $(this).parent().find('.productDescription').slideToggle();
         $(this).parent().find(".show_hide").hide();
        $(this).parent().find(".hide_show").show();
    });

 $('.hide_show').click(function(){
    $(this).parent().find('.productDescription').slideToggle();
         $(this).parent().find(".show_hide").show();
        $(this).parent().find(".hide_show").hide();

    });

});

</script>



<div class="product clearfix">
    <h4>Bath Bomb Cake Slice - Melting Heart</h4>
    <p>Drizzled with soap thiauthentic.</p>
    <a href="#" class="show_hide">See Full Description</a>
    <a href="#" class="hide_show">Hide Description</a>
    <div class="productDescription">
       <p>This very </p>
    </div>
</div>

<div class="product clearfix">
    <h4>Cupcake Bath Bomb - La Vie en Rose</h4>
    <p>Muffin Size in it's o cupcake bathbomb.</p>
    <a href="#" class="show_hide">See Full Description</a>
    <a href="#" class="hide_show">Hide Description</a>
    <div class="productDescription">
        <p>Muffin Size in </p>
    </div>
</div>

zakaryfaithfull

К сожалению, это не сработало, это вообще остановило работу show/hide :/

ShotDriller

Код, который я дал, не нуждается в скрытии якоря. Нажмите на кнопку "showDescription", чтобы показать описание. нажмите еще раз на ту же кнопку "showDescription", чтобы скрыть описание. Вы можете показать якорный тег "Скрыть описание" при расширении описания.

ShotDriller

Обновленная функциональность / предоставленный код. просто скопируйте и вставьте предоставленный код и проверьте. если это то, что вы хотите.

Рейтинг:
0

Azziet 

<h1>
        Show/Hide using jQuery</h1>
    <a id="showhidetrigger" href="#">show/hide</a>
    <div id="showhidetarget">
        This is the box that is hidden and shown.
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#showhidetarget').hide();

            $('a#showhidetrigger').click(function () {
                $('#showhidetarget').toggle(400);
            });
        });
    </script>

sanjay_gope

sdsd