Проблема с использованием toggle () на скрытых DIVs с JQuery - PullRequest
Новая
       22

Проблема с использованием toggle () на скрытых DIVs с JQuery

1 голос
/ 29 августа 2011

РЕДАКТИРОВАТЬ: проблема была не в том, чтобы скрыть их (как я сначала подумал), а в том, чтобы использовать функцию toggle () на скрытых DIV, поэтому я с надеждой изменил заголовочный вопросэто помогает кому-то с подобной проблемой

У меня есть проблемы, чтобы скрыть / показать DIV, используя функцию toggle ():

код, который я использую: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
div{width:200px;padding:5px;padding-left:30px;border:0 solid #000;border-left-width:1px;border-bottom-width:1px;font-weight:700}
p{color:grey}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#main span").click(function() {
        $("#" + $(this).parent().attr("id") + " div").toggle("fast");
    });

    $("#main div").hide();

});
</script>
</head>
<body>
<div id="main">
    <span>hider</span>
    <div id="main-child1"><p>content-child1</p></div>
    <div id="main-child2">
        <span>hider</span>
        <div id="ultra-child"><p>content-ultrachild</p></div>
    </div>
    <div id="main-child3"><p>content-child3</p></div>
    <div id="main-child4">
        <span>hider</span>
        <div id="child-child4"><p>content-c4</p></div>

        <div id="main-child5">
            <span>hider</span>
            <div id="child-c5"><p>content-chl5</p></div>
        </div>
    </div>
</div>
</body>
</html>

Ответы [ 6 ]

2 голосов
/ 29 августа 2011 
$(function() {
    $('#main>div').fadeOut('fast');
});
  1. $(function() {}) запустит ваш скрипт, как только страница будет готова.
  2. $('#main>div') Задайте все div первого уровня в # main.
  3. fadeOut сделать исчезновение выбранного Div.
1 голос
/ 29 августа 2011

Я думаю, что ваша проблема в том, что вы выбираете (и, следовательно, показываете) ВСЕ дивы, когда нажимаете hider.Используйте дочерний селектор, чтобы открывать только те уровни, которые вам нужны: 

$("#" + $(this).parent().attr("id") + " > div").toggle("fast");

Однако лучшим решением было бы просто переключить братьев и сестер hider

$(this).siblings("div").toggle("fast");

Ваш код дляскрыть элементы отлично работает.

Демо: http://jsfiddle.net/EppSm/6

1 голос
/ 29 августа 2011

Вот, пожалуйста: 

$("#main > div").hide();
1 голос
/ 29 августа 2011

Добавить триггер для первого элемента:

$("#main span:first").trigger("click");

http://jsfiddle.net/EppSm/4/

0 голосов
/ 06 июня 2012

Если вы имеете в виду использование toggle() для элемента, который находится внутри скрытого DIV, это известная ошибка.Насколько я могу судить, это не исправлено (с использованием jquery 1.7.2) согласно документации .

0 голосов
/ 29 августа 2011

используйте jQuery .find(): 

$("#main").find("div").hide();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...