如何只允许一次显示一个切换div

Question

我想知道如何在一次只能选择一个的地方。请记住这是适用于Wordpress的。由于某种原因，它不喜欢＆＃34; $＆＃34;。如果有比我正在做的更简单的方式，请告诉我！任何反馈都有帮助！

HTML

<div id="top-bar" style="width:100%; background-color: #1f2122 !important; padding: 10px 0;">
    <div style="width: 392px; margin:auto;">
        <div id="locations">
            <div id="pull" style=" margin:auto;display: inline-block; padding: 0 9px;">
                <a href="#" class="pullmeshr">Sherman Campus</a>
            </div>
            <div id="pull" style=" margin:auto;display: inline-block;">
                <a href="#" class="pullmedur">Durant Campus</a>
            </div>
        </div>
    </div>
</div>
<div style="width: 100%; background-color: #3a3e3f !important;">
    <div style="width: 50%; margin: auto;">
        <div id="pullmeinfoshr">
            <div id="closeshr">
                <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png">
            </div>
            <div>
                Sherman Campus Info - Coming Soon
            </div>
        </div>
    </div>
    <div style="width: 50%; margin: auto;">
        <div id="pullmeinfodur">
            <div id="closedur">
                <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png">
            </div>
            <div>
                Durant Campus Info - Coming Soon
            </div>
        </div>
    </div>
</div>
<!-- script to animate campus selector-->

SCRIPT

<script>
    window.onOff = 0;
    jQuery(".pullmeshr").click(function() {
        jQuery(".pullmeshr").animate(500);
        jQuery("#pullmeinfoshr").slideDown(500);
        window.onOff = 1;
    });

    if (window.onOff = 1) {
        jQuery("#closeshr").click(function() {
             jQuery("#pullmeinfoshr").slideUp(500);
        window.onOff = 0;
    });
  }

    jQuery(".pullmedur").click(function() {
        jQuery(".pullmedur").animate(500);
            jQuery("#pullmeinfodur").slideDown(500);
        window.onOff = 1;
    });

    if (window.onOff = 1) {
        jQuery("#closedur").click(function() {
            jQuery("#pullmeinfodur").slideUp(500);
        window.onOff = 0;
    });
}
</script>
<!-- end campus selector script -->

Answer 1

如果您只想访问jquery标识符$，可以按照wordpress docs进行操作：

  

但是，如果你真的喜欢简短的$而不是jQuery，你可以使用   以下包装代码：

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

对于评论中的部分问题，试试这个（这是一个简单的解决方案，它适用于2种选择，但是对于选择列表，有一种比使用CSS兄弟选择器指定每个id /类更好的方法和HTML结构或其他各种方法）

<script>
    window.onOff = 0;
    jQuery(".pullmeshr").click(function() {
        jQuery(".pullmeshr").animate(500);
        jQuery("#pullmeinfoshr").slideDown(500);
        jQuery("#pullmeinfodur").slideUp(500); //add this
        window.onOff = 1;
    });

    if (window.onOff = 1) {
        jQuery("#closeshr").click(function() {
        jQuery("#pullmeinfoshr").slideUp(500);
        window.onOff = 0;
    });
  }

    jQuery(".pullmedur").click(function() {
        jQuery(".pullmedur").animate(500);
        jQuery("#pullmeinfodur").slideDown(500);
        jQuery("#pullmeinfoshr").slideUp(500); //add this
        window.onOff = 1;
    });

    if (window.onOff = 1) {
        jQuery("#closedur").click(function() {
        jQuery("#pullmeinfodur").slideUp(500);
        window.onOff = 0;
    });
}
</script>