JQuery Show Скрыть показ нескольких материалов - PullRequest
Новая
       5

JQuery Show Скрыть показ нескольких материалов

1 голос
/ 02 сентября 2011

У меня проблемы с созданием 1 массового показа для нескольких документов.Это шоу должно содержать другие элементы, такие как ol ul li и т. Д. В настоящее время у меня возникают проблемы с отображением другого содержимого, кроме тега, а также с добавлением еще одного showhide внутри оригинала.show hide

Также для отображения поля с содержимым в нем.

HTML: 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="showhideJQuery.js"></script>
</head>
<style>
.showhide {
    width:500px;
    height:200px;
    margin:1em .5em;
}
.showhide h3 {
    margin: 0;
    padding: .25em;
    background:#0033CC;
    border-top:1px solid #666666;
    border-bottom:1px solid #666666;
}
.showhide div {
    padding: .5em .25em;
}
</style>

<body>
<div class="showhide">
    <h3>Title 1</h3>
    <div>
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3>Another one?!</h3>
                <div>YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>
</html>



JQuery 

$(document).ready(function(){
$('div.showhide:eq(0)> div').hide();
$('div.showhide:eq(0)> h3').click(function() { 
    $(this).next().slideToggle('fast');                                            

});

});

Ответы [ 3 ]

2 голосов
/ 02 сентября 2011

Надеюсь, это то, что вы ищете.

Рабочая демо 

$(function(){
    $('div.showhide > div').hide();
    $('div.showhide > h3').click(function() { 
        $(this).next().slideToggle('fast');                                        });
});
0 голосов
/ 02 сентября 2011

Если вы избавляетесь от :eq(0) в ваших селекторах jquery, он делает то, что вы хотите? 

$(document).ready(function(){
$('div.showhide > div').hide();
$('div.showhide > h3').click(function() { 
    $(this).next().slideToggle('fast');                   
    }); 
});
0 голосов
/ 02 сентября 2011

Добавляя атрибуты класса к элементу, который вы хотите вызвать показать / скрыть и элемент, который вы хотите показать / скрыть, вы можете сделать что-то вроде этого:

HTML: 

<body>
<div class="showhide">
    <h3 class="showhideclick">Title 1</h3>
    <div class="showhidecontainer">
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3 class="showhideclick">Another one?!</h3>
                <div class="showhidecontainer">YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>

JS: 

$(document).ready(function(){
    $('.showhidecontainer').hide();
    $('.showhideclick').click(function() { 
        $(this).next('.showhidecontainer').slideToggle('fast');                                            
    });
});

Это также дает вам гибкость в использовании различных элементов для хранения скрытого контента и того, какой элемент вызывает действие.

Надеюсь, это поможет.

...