僅限行文本切換菜單

Question

我有此：http://jsfiddle.net/QDUQk/1621/

*單擊「菜單」切換幻燈片。代碼在這篇文章的底部。

如何使「菜單」不消失，而是將「內部菜單」滑出到左側，而不移動「菜單」的位置（「菜單」位於最右側屏幕的一側和「內部菜單」將滑出到「菜單」的左側而不移動「菜單」的位置）。

因此點擊「菜單」讓您在「內部菜單◀菜單」&再次點擊「菜單」，您將回到剛纔顯示的「菜單」。

此外，我怎樣才能讓它點擊「內部菜單」不會引起它滑走？

謝謝！

CSS

#categories { 
    display: none; 
    border : none; 
    width: 100px; 
    right: 0px; 
} 

HTML

<div id="cat_icon">Menu</div> 
<div id="categories"> 
    <div CLASS="panel_title">Inner Menu◀</div> 
    </div> 
</div> 

JS

$('#cat_icon,.panel_title').click(function() { 
    if($('#cat_icon').is(':visible')){ 
    $('#cat_icon').fadeOut(function() { 
     $('#categories').toggle('slide', { 
      direction: 'right' 
     }, 1000); 
    }); 
    } 
    else{ 
     $('#categories').toggle('slide', { 
      direction: 'right' 
     }, 1000, function(){ $('#cat_icon').fadeIn();}); 
    } 
}); 

Answer 1

簡化你的JS到

$('#cat_icon').click(function() { 
    $('#categories').toggle('slide', { 
     direction: 'right' 
    }, 1000); 
}); 

和改變CSS來

#cat_icon { 
    float: right; 
} 
#categories { 
    float: right; 
    display: none; 
    border : none; 
    width: 100px; 
    right: 0px; 
} 

http://jsfiddle.net/zqnL6aqg/2/

Answer 2

這裏有一個片段：

$('#cat_icon').click(function() { 
 
    $('#categories').toggle('slide', { direction: 'right' }, 1000); 
 
});

#container 
 
{ 
 
    float: right; 
 
    /* to avoid the "Full page" div in the snippet iframe*/ 
 
    margin-top: 50px; 
 
} 
 
#cat_icon 
 
{ 
 
    background-color: white; 
 
} 
 
#cat_icon, #categories 
 
{ 
 
    position: absolute; 
 
    right: 0px; 
 
    line-height: 1.5em; 
 
} 
 
#categories { 
 
    margin-right: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div id ="container"> 
 
    <div id="categories"> 
 
     <div CLASS="panel_title">Inner Menu◀</div> 
 
    </div> 
 
    <div id="cat_icon">Menu</div> 
 
</div>

爲了避免重複，你可以把一個白色背景，#cat_icon元素。

此外，由於◀符號，#cat_icon和#categories元素都不會正確獲得 。您可以強制line-height避免它。

希望它有幫助！

Answer 3

我認爲這涵蓋了你所要求的一切： http://jsfiddle.net/QDUQk/1627/

爲了確保單擊內部菜單沒有關閉它，你需要從。點擊（）處理程序中刪除「.panel_title」，像這個：

$('#cat_icon').click(function() { 
    if($('#cat_icon').is(':visible')){ 

     $('#categories').toggle('slide', { 
      direction: 'right' 
     }, 1000); 

    } 
    else{ 
     $('#categories').toggle('slide', { 
      direction: 'right' 
     }, 1000, function(){ $('#cat_icon').fadeIn();}); 
    } 
}); 

其他修補程序包括定位元素...並提供他們可以相對定位的父母。

<div id="container"> 
    <div id="cat_icon">Menu◀</div> 
    <div id="categories"> 
     <div CLASS="panel_title">Inner Menu◀</div> 
    </div> 
<div> 

和CSS一樣：

#container { 
    position: relative; 
} 
#cat_icon { 
    position: fixed; 
    top: 0px; 
    right: 0px; 
} 
#categories { 
    position: fixed; 
    top: 0px; 
    right: 50px; 
    display: none; 
    border : none; 
    width: 100px; 
}