Question

我试图实现我在其他人询问的stackoverflow上找到的答案，但我没有得到我想要的结果。

我在一个建筑物的网站上有一个关于这个部分的内容。在那一节我有四个不同的项目。在底部是一个按钮，当单击该按钮时，我希望隐藏四个框，并在其位置显示（显示）一个大的项目，并显示关于单击按钮的项目的信息。使用我现在拥有的代码，当我单击其中一个按钮时，所有关于项目div的大部分显示而不是仅显示一个。是否可以在点击时只显示一个大的项目（showfullabout），而不是全部四个？我想在点击时单独显示项目。

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
    <div class="about-item-full">
         <h1>Title</h1>
         <h2>Description</h2>
         <p>Content</p>
        <button class="small-about"><i class="fa fa-plus"></i>
        </button>
    </div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
    <div class="about-item">
        <div class="about-item-top">
            <img src="img/img07.jpg" alt="img">
            <div class="about-item-circle">
                <span class="oi oi-justify-left"></span>
            </div>
        </div>
        <div class="about-item-bottom">
            <h1>Title</h1>
            <h2>Description</h2>
            <p>
                Content
            </p>
            <button class="full-about"><i class="fa fa-plus"></i>
            </button>
        </div>
    </div>
    <!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
    <div class="about-item-full">
         <h1>Title</h1>
         <h2>Description</h2>
         <p>Content</p>
        <button class="small-about"><i class="fa fa-plus"></i>
        </button>
    </div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
    <div class="about-item">
        <div class="about-item-top">
            <img src="img/img07.jpg" alt="img">
            <div class="about-item-circle">
                <span class="oi oi-image"></span>
            </div>
        </div>
        <div class="about-item-bottom">
            <h1>Title</h1>
            <h2>Description</h2>
            <p>
                Content
            </p>
            <button class="full-about"><i class="fa fa-plus"></i>
            </button>
        </div>
    </div>
    <!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
    <div class="about-item-full">
         <h1>Title</h1>
         <h2>Description</h2>
         <p>Content</p>
        <button class="small-about"><i class="fa fa-plus"></i>
        </button>
    </div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
    <div class="about-item">
        <div class="about-item-top">
            <img src="img/img07.jpg" alt="img">
            <div class="about-item-circle">
                <span class="oi oi-monitor"></span>
            </div>
        </div>
        <div class="about-item-bottom">
            <h1>Title</h1>
            <h2>Description</h2>
            <p>
                Content
            </p>
            <button class="full-about"><i class="fa fa-plus"></i>
            </button>
        </div>
    </div>
    <!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
    <div class="about-item-full">
         <h1>Title</h1>
         <h2>Description</h2>
         <p>Content</p>
         <button class="small-about"><i class="fa fa-plus"></i>
         </button>
    </div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
    <div class="about-item">
        <div class="about-item-top">
            <img src="img/img07.jpg" alt="img">
            <div class="about-item-circle">
                <span class="oi oi-location"></span>
            </div>
        </div>
        <div class="about-item-bottom">
            <h1>Title</h1>
            <h2>Description</h2>
            <p>
                Content
            </p>
            <button class="full-about"><i class="fa fa-plus"></i>
            </button>
        </div>
    </div>
    <!--END ITEM-->
</div>
<!--END COLUMN-->

<!--CSS-->
.showfullabout{
display:none;
}

<!--Script-->
$("button.full-about").click(function(){
    $(".about-item").hide();
    $(".showfullabout").fadeToggle(500);
});
$("button.small-about").click(function(){
    $(".about-item").fadeToggle(500);
    $(".showfullabout").hide();
});

Answer 1

您需要使用相对选择器来查找目标元素

$("button.full-about").click(function () {
    $(".about-item").hide();
    $(this).closest(".about-item").parent().prev('.showfullabout').fadeIn(500);
});
$("button.small-about").click(function () {
    $(this).closest(".showfullabout").hide();
    $(".about-item").fadeToggle(500);
});

演示：Fiddle

对于按钮full-about，您需要隐藏所有about-item元素并显示祖先about-item的父级的前一个兄弟，而small-about按钮则相反

如何单独显示/隐藏具有相同类名的div？

1 个答案: