如何在默认情况下保持一个切换打开javascript

时间:2015-09-24 11:26:26

标签: javascript jquery

我想知道默认情况下是否有可能在页面加载时保持一个切换打开,我一直在撕掉我的头发。 任何帮助将不胜感激。

我的帐户切换是我试图保持开放!



$(document).ready(function () {
    $("#account").show("slow").siblings().hide("slow");
    $('a#francc').click(function () {
        var divname = this.name;
        $("#" + aname).show("slow").siblings().hide("slow");
    });
});

<div class="sidebar">
    <a  id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
    <div id="Order" style="display: none;">  </div>
              
    <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
    <div id="Rest" style="display: none;"><div>
              
    <!-- your account -->
    <a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
    <div id="Franc" style="display: none;">
        <div>
            <ul class="tabs">
                <li id="order" class="Red"><a href="Franchise-account-orders.php">Franchise Manager</a></li>
                <li id="order" class="Blue" ><a href="admin_panel.php">Pending</a></li>
            </ul>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

当然,只需从选择中删除该兄弟姐妹。你的HTML也有很多问题。我已经移除了onclicks,你有一个开放的div标签,其中应该有一个封闭的标签。

&#13;
&#13;
$(document).ready(function () {
    // set up the click event
    $('.sidebar > a').on('click', function(){
      $(this).next('div').show("slow").siblings('div:not(#Franc)').hide("slow");
    });
    // trigger orders which has id francc, not orders
    $('#francc').trigger('click');
    // or perhaps you mean this, but it's slower // $('a[name="account"]').trigger('click');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
    <a  id="order" class="header" href="#"><h3 id="orderr">Orders</h3></a>
    <div id="Order" style="display: none;"> orders dropdown </div>
              
    <a id="restt" class ="header" href="#"><h3>Your Restaurants</h3></a>
    <div id="Rest" style="display: none;">Your Restaurants dropdown</div>
              
    <!-- your account -->
    <a id="francc" name="account" class ="header" href="#"><h3>Your Account</h3></a>
    <div id="Franc" style="display: none;">
        <div>
            <ul class="tabs">
                <li id="order" class="Red"><a href="Franchise-account-orders.php">Franchise Manager</a></li>
                <li id="order" class="Blue" ><a href="admin_panel.php">Pending</a></li>
            </ul>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这将有效,http://fiddle.jshell.net/9oo1jrr9/

<script>
    $(document).ready(function () {
    $("#Rest").show().siblings('div').hide();
});
function toggleVisibility(ctrlThis){
    $("#" + ctrlThis).first('div').show("slow").siblings('div').hide();
}
</script>
<div class="sidebar">
 <a  id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
 <div id="Order" style="display: none;">
    <div>
            <ul class="tabs">
                <li id="order" class="Red">Order 1</li>
                <li id="order" class="Blue" >Order 2</li>
            </ul>
        </div>
 </div>
 <a id="restt" class ="header" href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
 <div id="Rest" style="display: none;">
     <div>
            <ul class="tabs">
                <li id="order" class="Red">Restaurants 1</li>
                <li id="order" class="Blue" >Restaurants 2</li>
            </ul>
        </div>
 </div>
 <a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
 <div id="Franc" style="display: none;">
        <div>
            <ul class="tabs">
                <li id="order" class="Red"><a href="Franchise-account-orders.php">Franchise Manager</a></li>
                <li id="order" class="Blue" ><a href="admin_panel.php">Pending</a></li>
            </ul>
        </div>
    </div>
</div>