Question

我试图通过直接点击信息图形中的按钮来隐藏和显示信息图中的详细信息。 Theres 3按钮，我想单独显示那里的内容。但与此同时，我还有另一个细节按钮，可以显示和隐藏所有细节。

到目前为止，这是我的代码。

<div class="item" style="background: #eeeeef;">
    <div class="it-con alltag-con">
        <div class="einlagen-con-neu">
            <div class="ein-con-rel">
                <img class="einlage-neu" src="<?php bloginfo('stylesheet_directory'); ?>/img/einlagen-ip/alltag-ip-min.png" />
                <div class="detail-1-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Pelotte</h5>
                        <span class="line-karo"></span>
                        <p>stimuliert die Muskulatur
                            <br> und entlastet gleichzeitig
                            <br> die Achillessehne</p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
                <div class="detail-2-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Detorsionskern</h5>
                        <span class="line-karo"></span>
                        <p>stärkt den Mittelfußbereich
                            <br> und bietet statische
                            <br> Korrektur
                        </p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
                <div class="detail-3-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Fersenschale</h5>
                        <span class="line-karo"></span>
                        <p>umfasst die Ferse sanft
                            <br> und führt den Fuß optimal
                        </p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="mess-text">
            <span class="x-btn">&#10005;<br></span>
            <span class="ei-btn"><span class="karo"></span>INFO
            </span>
            <h4><?php the_field('ueberschrift_einlagen', 102); ?></h4>
            <br>
            <p>
                <?php the_field( 'texte_einlagen', 102); ?>
            </p>
            <span class="ei-btn-s"><span class="karo"></span> INFOS</span>
        </div>
        <div class="toggle">
            <div class="det-btn"><span class="karo"></span> Detail</div>
            <div class="inf-btn">Info</div>
        </div>
    </div>
</div>

我的jquery

$(".caro-einlage").click(function(e) {
    //e.preventDefault();
    $(this).parent(".detail-inf-con").toggleClass("hide-ein");
    //$(this).prev(".state-1").toggleClass("hide");
});

$(".alltag-con .det-btn").click(function(e) {
    //e.preventDefault();
    $(".alltag-con .detail-inf-con").toggleClass("hide-ein");
    //$(this).prev(".state-1").toggleClass("hide");
});

这里也是一个jsfiddler。 https://jsfiddle.net/JayKray/sxk5e5a4/1/

帮助确实是一种折旧。

：）

单个细节按钮和全局细节按钮

0 个答案: