打开子项 div 点击父项

Question

我正在尝试使用自定义 HTML 和 JS 为 joomla 创建一个 "module"。我有 4 个 div，每个都有一些信息。当我点击其中一个时，我点击的 div 的信息必须出现...... 问题是，我要怎么做才能让它出现；只有我点击的div的信息...（？）这是代码：

HTML

<div class="datos-lunares">
    <div id="nueva" class="luna nueva">
        <h2>Luna nueva</h2>
        <div id="nueva-datos" class="datos close">
            <p>Ideal para cosecha de raíz.</p>
            <p>Retira las hojas y botones florales marchitos y secos.</p>
            <p>Rotura los sustratos consiguiendo suelos más aireados y sueltos.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
            <p>Desmaleza tu huerta eliminando las malas hierbas.</p>
        </div>
    </div>

    <div id="menguante" class="luna menguante">
        <h2>Cuarto menguante</h2>
        <div id="datos-menguante" class="datos close">
            <p>Si tienes cultivos cuyos frutos son comestibles, recoléctalos,también es el período más propicio para recoger hortalizas de hoja.</p>
            <p>Aumenta la cantidad de agua en el riego.</p>
            <p>Trasplanta los cultivos que lo requieran.</p>
            <p>Si utilizas fertilizantes líquidos, aplícalos en esta etapa.</p>
        </div>
    </div>

    <div id="creciente" class="luna creciente">
        <h2>Cuarto creciente</h2>
        <div id="datos-creciente" class="datos close">
            <p>Este período se considera propicio para sembrar y repicar las plantas cuyas partes comestibles están por encima de la tierra y dan frutos, como tomates,pimientos, guisantes, judías...</p>
            <p>Aplica fertilizantes y abonos con previo laboreo del suelo.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
        </div>
    </div>

    <div id="llena" class="luna llena">
        <h2>Luna llena</h2>
        <div id="datos-llena" class="datos close">
            <p>Siembra los vegetales cuya parte comestible crece bajo la tierra (zanahoria, patata, cebolla, etc).</p>
            <p>Abona los cultivos con estiércol y restos de materia vegetal.</p>
            <p>Aplica insecticidas orgánicos, esta fase es la más oportuna para controlar las plagas.</p>
            <p>Riega sin mojar las yemas y botones florales.</p>
            <p>Se sugiere realizar los injertos,trasplantes y podas.</p>
        </div>
    </div>
</div>

JQuery

jQuery(document).ready(function() {
    jQuery(this, ".luna").click(function() {
        if (jQuery(".datos").hasClass("close")) {
            jQuery(".datos").show("slow");
            jQuery(".datos").removeClass("close");
            jQuery(".datos").addClass("open");
        } else {
            jQuery(".datos").hide("slow");
            jQuery(".datos").removeClass("open");
            jQuery(".datos").addClass("close");
        }

    });
});

Answer 1

请使用

$(this).find( "div" ).show("slow");

显示div。

Answer 2

使用 jQuery(this) 与您实际所在的对象进行交互。
然后，find class 'datos'
最后，做你需要的...

类似于：

jQuery(document).ready(function() {

    jQuery(".luna").on('click', function() {

        var $datos = jQuery(this).find(".datos");

        if ($datos.hasClass("close")) {

            $datos.show("slow").removeClass("close").addClass("open");

        } else {

            $datos.hide("slow").removeClass("open").addClass("close");

        }

    });

});

查看片段示例：

jQuery(document).ready(function() {

        jQuery(".luna").click(function() {

            var $datos = jQuery(this).find(".datos");

            if ($datos.hasClass("close")) {

                $datos.show("slow").removeClass("close").addClass("open");

            } else {

                $datos.hide("slow").removeClass("open").addClass("close");

            }

        });

    });

.luna h2 {
  color: red
}
.datos {
  display: none
}
.datos.open {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="datos-lunares">
    <div id="nueva" class="luna nueva">
        <h2>Luna nueva</h2>
        <div id="nueva-datos" class="datos close">
            <p>Ideal para cosecha de raíz.</p>
            <p>Retira las hojas y botones florales marchitos y secos.</p>
            <p>Rotura los sustratos consiguiendo suelos más aireados y sueltos.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
            <p>Desmaleza tu huerta eliminando las malas hierbas.</p>
        </div>
    </div>

    <div id="menguante" class="luna menguante">
        <h2>Cuarto menguante</h2>
        <div id="datos-menguante" class="datos close">
            <p>Si tienes cultivos cuyos frutos son comestibles, recoléctalos,también es el período más propicio para recoger hortalizas de hoja.</p>
            <p>Aumenta la cantidad de agua en el riego.</p>
            <p>Trasplanta los cultivos que lo requieran.</p>
            <p>Si utilizas fertilizantes líquidos, aplícalos en esta etapa.</p>
        </div>
    </div>

    <div id="creciente" class="luna creciente">
        <h2>Cuarto creciente</h2>
        <div id="datos-creciente" class="datos close">
            <p>Este período se considera propicio para sembrar y repicar las plantas cuyas partes comestibles están por encima de la tierra y dan frutos, como tomates,pimientos, guisantes, judías...</p>
            <p>Aplica fertilizantes y abonos con previo laboreo del suelo.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
        </div>
    </div>

    <div id="llena" class="luna llena">
        <h2>Luna llena</h2>
        <div id="datos-llena" class="datos close">
            <p>Siembra los vegetales cuya parte comestible crece bajo la tierra (zanahoria, patata, cebolla, etc).</p>
            <p>Abona los cultivos con estiércol y restos de materia vegetal.</p>
            <p>Aplica insecticidas orgánicos, esta fase es la más oportuna para controlar las plagas.</p>
            <p>Riega sin mojar las yemas y botones florales.</p>
            <p>Se sugiere realizar los injertos,trasplantes y podas.</p>
        </div>
    </div>
</div>

编辑（澄清）：

我没有意识到您在 click 事件的分配中使用了 this...
...实际上，可以将第二个参数传递给构造函数，以避免 find () 函数，但您必须在嵌套对象而不是容器中使用它。

例如

jQuery(".luna").on('click', function() {
    if (jQuery(".datos", this).hasClass("close")) { /*...*/ });
});

Answer 3

我假设你想要手风琴之类的东西：

$('.luna > h2').on('click', function(){

    $(this).next('.datos').slideToggle();
    //Or
    $(this).next('.datos').toggleClass('close open');

});

Demo

你也可以看看jQuery UI Accordion

更新

要在单击一个 div 时关闭所有其他 div，您可以执行以下操作：

var next = $(this).next('.datos');
$('.datos').not(next).each(function(){
    $(this).slideUp();
});
next.slideToggle();

Demo

Answer 4

在我看来，您缺少 CSS 来定义信息块在具有 class close 和 open 时的显示方式，除非你有一些 CSS 链接到你没有提到的文档。

所以你最终会在 CSS 文件中得到这样的东西：

.close
{
    display: none;
}

.open
{
    display: block;
}

或者更具体地说，使用 close/open classes:

避免与页面上的其他元素发生潜在冲突

.datos.close
{
    display: none;
}

.datos.open
{
    display: block;
}

打开子项 div 点击父项

Open a child div clicking in parent's one

jquery

click

编辑（澄清）：