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

Question

我想知道我该如何做到这一点，一次只能选择一个。请记住这是用于Wordpress的。出于某种原因，它不喜欢“$”。如果比我所做的更容易，请让我知道！任何反馈都有帮助！

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，你可以使用 follo在你的代码翼包装：

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个选择，但选择列表中有更好的方式比规定每个ID /班，使用CSS同胞选择和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>