Question

我尝试使用jquery和css构建一个模态窗口，单击列表元素将激活该窗口。我想要实现的效果是在另一个div模糊效果中间的弹出div，但是对于每个列表元素我只想显示一个div !! （我在要显示的元素上使用display none，所以如果我单击两个列表元素，每个框将彼此靠近显示，并且获得的效果将非常难看）。这是我的代码：听力元素：

<div class="blabla" id="page-wrap">
                <ul class="nav nav-sidebar">
                    <li></li><li></li><li></li>....
                </ul>
            </div>

模态div：

<div class="main">
                <div class="before-background"></div>
                <div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
<div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
<div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
</div>

javascript（我想使用.each函数，但我不知道如何将每个列表与每个div连接起来）：

$("li:nth-child(1)").on("click", function() {
            $(".before-background").toggleClass("dialogIsOpen");
            $(".main .modal:nth-child(2)").toggleClass("modalEffect");
        });
        $("li:nth-child(2)").on("click", function() {
            $(".before-background").toggleClass("dialogIsOpen");
            $(".main .modal:nth-child(3)").toggleClass("modalEffect");
        });

..等等..

最后是css：

.modal {
    position: relative;
    float: left;
    background: #8dc63f;
    color: white;
    width: 50%;
    left: 22%;
    top: -90%;
    display: none;
    padding: 2%;
    text-align: center;
}
.dialogIsOpen {
    -webkit-filter: blur(5px) grayscale(50%);
    /*-webkit-transform: scale(0.9);*/
}
.modalEffect {
    display: block!important;
    pointer-events: auto!important;
}
.before-background, .modal {
    transition: all 0.9s ease;
}
.main {
    margin-left: 0;
    height: 443px;
    width: 94.333333%;
    padding: 0;
}
.before-background {
    background-image: url(images/effect-image.jpg);
    width: 100%;
    height:100%;
}

有什么建议吗？

Answer 1

要确保一次只显示一个div，并为所有li使用一个事件处理程序，您可以使用：

.index()：这给出一个整数，表示元素相对于其兄弟元素的位置。如果您将其应用于this，则可以知道点击的li的数量。
.eq()：这会将一组元素减少为指定索引处的元素。因此，您可以根据索引“选择”这样的div。
您不要使用.each()，因为您希望一次只使用一个li和div

事件处理程序可能如下所示：

$("li").on("click", function() {
    var index = $(".dialogIsOpen").length 
            ? $(".main .modalEffect").index() - 1 // number of visible `div` 
            : $(this).index(); // number of clicked `li` element
    $(".main .modal").eq(index).toggleClass("modalEffect");
    $(".before-background").toggleClass("dialogIsOpen");
});

以上代码会检测模式div当前何时打开，如果是，则无论点击哪个li，点击都会关闭该点击。如果未打开任何模态div，则点击li将会打开相应的模式div。

你仍然需要做一些事情来实现真正的模态行为，但我认为上面的问题只能回答你关于只展示一个div的问题。

for循环使用jquery避免触发多个元素

1 个答案: