Question

我搜索过Stackoverflow但是找不到针对这种特殊情况的任何解决方案。

这是我的代码：

<div class="wpgtoggle">
    <div class="toggleheader" data-toggle="#toggle1">This is header</div>
    <div class="toggleclose">X</div>
    <div id="toggle1" class="togglecontent">
This is content
    </div>
</div>

<div class="wpgtoggle">
    <div class="toggleclose" id="toggle2">X</div>
    <div class="toggleheader" data-toggle="#toggle2">This is header</div>
    <div id="toggle2"  class="togglecontent">This is content</div>
</div>

<div class="wpgtoggle">
    <div class="toggleclose" id="toggle3">X</div>
    <div class="toggleheader"  data-toggle="#toggle3">This is header</div>
    <div id="toggle3"  class="togglecontent">This is content</div>
</div>

我想要实现的功能就像这样：Link

如果没有关闭按钮，那么我的当前代码工作正常，但事情是我的客户需要额外的＆＃34;关闭＆＃34;按钮太像我上面给出的例子了。

我怎样才能做到这一点？

问候。

Answer 1

<!DOCTYPE html>
<html>
    <head>
    <style>
    .wpgtoggle {border:1px solid #ccc; padding:10px; margin-bottom: 20px;}
    .togglecontent {display:none;}
    .toggleclose {font-size:20px; position: absolute; color:red; right:0;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(function(){
        $("div[data-toggle]").on("click", function(e) {
            e.preventDefault();  // prevent navigating
            $(".togglecontent").slideUp();
            var selector = $(this).data("toggle");  // get corresponding element
            $(selector).slideToggle();
        });
        $( ".toggleclose" ).click(function() {
            $($(this).data("toggleclose")).slideUp("slow");
        });
    });
    </script>
    </head>
    <body>
        <div class="wpgtoggle">
            <div class="toggleheader" data-toggle="#toggle1">This is header</div>
            <div class="toggleclose" data-toggleclose="#toggle1">X</div>
            <div id="toggle1" class="togglecontent">This is content</div>
        </div>
        <div class="wpgtoggle">
            <div class="toggleclose" data-toggleclose="#toggle2">X</div>
            <div class="toggleheader" data-toggle="#toggle2">This is header</div>
            <div id="toggle2"  class="togglecontent">This is content</div>
        </div>
        <div class="wpgtoggle">
            <div class="toggleclose" data-toggleclose="#toggle3">X</div>
            <div class="toggleheader"  data-toggle="#toggle3">This is header</div>
            <div id="toggle3"  class="togglecontent">This is content</div>
        </div>
    </body>
</html>

切换Div，但一次只显示一个

1 个答案: