Question

我想创建两个出现在链接点击上的弹出窗口，再次单击该链接即可消失。我试图用display：none和display：inline来做这件事，但不幸的是，一旦我点击一个链接，显示：添加内联，但无法删除。

jQuery的：

$(document).ready(function() {
$('#open_thanks').click(function(e) {
    e.preventDefault();
    var tPop = $('.thanks_popup');
    if (tPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else {
        tPop.css('display','inline')
    }
});
$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

}）;

HTML：

<html>
    <head>
        <title>Popups</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/custom.js"></script>
    </head>
    <body>

<a href="#" id="open_thanks">Thanks Popup</a>

<a href="#" id="open_reference">Open Reference</a>

        <!-- Thanks PopUp -->
        <section class="thanks_popup">
            <section class="shell">
                <!-- Orange Header -->
                <h4>"Thanks! You're on our early invite list!"</h4>
                <!-- Main Message -->
                <p>Tell your friends about ItsPlatonic... <br>
we promise that those who sign up early will get special rewards..</p>              
            </section>
        </section>

        <section class="leave_reference_popup">
            <section class="shell">
                <section class="side-1">
                    <h4>LEAVE A REFERENCE in below box:</h4>
                    <div class="styled-select">
                        <select name="" id="">
                            <option value="">Positive</option>
                        </select>
                    </div>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference.</p>
                    <textarea name="" id="" cols="30" rows="10">

                    </textarea>
                </section>
                <section class="side-2">
                    <h4>INSTRUCTIONS:</h4>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. </p>
                    <button></button>
                </section>
            </section>
        </section> 
    </body>
</html>

CSS：

section.thanks_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}
section.leave_reference_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}

Answer 1

只需使用jQuery的toggle函数：

tPop.toggle();

没有参数，.toggle（）方法只是切换可见性元素：

Answer 2

$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')                // <-- CHANGE THIS TO RPOP
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

您忘了在rPop部分将顶部更改为Pop。因此切换rPop将无法将其切换。

Answer 3

下次请使用jsFiddle或类似的东西。我想你可以使用jQuery .toggle 也使用jQuery而不是$

你可能需要重构，所以点击要么关闭另一个。

jQuery(document).ready(function () {
jQuery('#open_thanks').click(function (e) {
    e.preventDefault();
    var tPop = jQuery('.thanks_popup').toggle('slow');
});
jQuery('#open_reference').click(function (e) {
    e.preventDefault();
    var rPop = jQuery('.leave_reference_popup').toggle('slow');
})
});

DEMO：http://jsfiddle.net/EMyRm/3/

如何切换显示：内联和显示切换？

3 个答案: