открыть и остаться открытым несколько DIV

0

Я искал последние 4 дня, чтобы найти рабочее решение для переключения меню. До сих пор я обнаружил, что закрываем открытый div, когда нажимаем другой div. Также проверен много вопросов в Stackoverflow, но ни один из них не работал так, как я хотел. То, что я хочу сделать, это щелкнуть div (родительский) и открыть (дочерний) щелчок родителя снова и закрыть дочерний элемент. Как я могу это сделать для нескольких родителей.

моя структура страницы что-то вроде:

DIV PARENT
   div child
DIV PARENT
   div child
DIV PARENT
   div child

.... и т.д. Это моя реализация jquery http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

Это мой php-код

<?php
    for($i = 0; $i < count($job_id); $i++)
    {
        $bg = ($i % 2) ? "odd" : "even";

        echo '
        <div class="block">
            <div style="border:solid 1px;" id="parent" class="parent ' .$bg. '">
                <div style="float:left; width:50%;"><div class="myMsGothic">' .$title[$i]. '</div></div>
                <div style="float:left; width:15%;">' .$name[$i]. '</div>
                <div style="float:left; width:15%;">' .$area[$i]. '</div>
                <div style="float:left; width:20%; text-align:right;" class="myMsMincho">ID　：　' .strtoupper($_id[$i]). '</div>
                <div class="clearLeft"></div>
            </div>
            <div class="child"><div class="innerContents"><p>' .nl2br($description[$i]). '</p></div></div>
        </div>';
    }
?>

К сожалению, у меня сейчас нет js-скрипта на моей странице, потому что ни один из них не был опробован

Спасибо за любую помощь

  • 0
    Можете ли вы показать нам, что вы пытались? Пожалуйста, включите любую разметку и код.
Теги:
toggle

2 ответа

0
Лучший ответ

HTML

<div class="parent">
    <div class="child"></div>
</div>

<div class="parent">
    <div class="child"></div>
</div>

JQuery

$('.parent').click(function() {
    $(this).find('.child').toggle();
});

Если вам не нравится toggle(), вы также можете попробовать fancier slideToggle() и fadeToggle().

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

CSS

.parent {
    display:none;
}

JQuery

$(document).ready(function() { 
    $('.parent').show();
});

http://jsfiddle.net/my5C9/1/

Поделиться
  • 0
    Дорогой Марло. Спасибо за ответ, но ничего не изменилось. дочерний div не открывается на самом деле он уже открыт :(
  • 0
    Сначала закройте их в CSS, добавив .child {display: none;}
Показать ещё 11 комментариев
0

Это простое решение. Коробки закрыты по умолчанию. Нажмите, чтобы открыть/закрыть несколько переключателей.

Разметка HTML

<div class="toggle">See Stuff</div>
<div class="paragraph">
<p>Content</p>
<p>Video</p>
<p>Image</p>
<ul>
  <li>List</li>
</ul>
<a href="#">Links</a>
</div>

JQuery

<script>
$('.paragraph').hide();
$('.toggle').click(function() {
var panel = $(this).next()
$('.paragraph').not(panel).slideUp();
panel.slideToggle({
    direction: "down"
}, 1000);
});
</script>

Стиль

<style>    
.toggle{margin-bottom:25px; margin-top:25px; margin-left:10px; padding:10px; 
font-size:24px; color:#2554C7; cursor: pointer;}
.paragraph{clear:both;margin-top:25px;}
</style>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню