備用在撥動類反應

這是HTML代碼，其中顯示導航圖標備用在撥動類反應

<div> 
     <div id="mob-nav" className={this.state.navbar + " right"}> 
     <div onClick={this.toggle.bind(this)}> 
     <div>click me</div> 
     <div></div> 
     <div></div> 
     </div> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">5</a></li> 
     <li><a href="#"> 6</a></li> 
     <li><a href="#">7</a></li> 
     <li><a href="#">8</a></li> 
     </ul> 
    </div> 
     <div id="left_panel"> 
     <div className="title"> 
      Naveen Tool 
     </div> 
     <div className="user_name"> 
      Name 
     </div> 
     <div className="submenu"> 
      <a href="structuring">Home</a> 
      <a href="#">Log out</a> 
     </div> 
     </div> 
    </div>

這裏是CSS代碼用於切換導航

#mob-nav { 
    position:fixed; 
    z-index:1000; 
    top:0px; 
    bottom:0px; 
    width:270px; 
    -webkit-box-shadow: inset -11px 0px 33px -10px rgba(51,51,51,1); 
    -moz-box-shadow: inset -11px 0px 33px -10px rgba(51,51,51,1); 
    box-shadow: inset -11px 0px 33px -10px rgba(51,51,51,1); 
    background-color: rgba(0,0,0,0.8); 
    transform: translate3d(-270px,0,0); 
    transition: transform 300ms ease; 
} 
.active-mob-nav #mob-nav { 
    transform: translate3d(0,0,0); 
} 
#mob-nav ul{ 
    list-style:none; 
    width: 100%; 
padding: 0px; 
} 

.table_border{ 
    border: 1px solid black; 
} 

#mob-nav ul li a{ 
    display:block; 
    text-align:center; 
    text-decoration:none; 
    color:#fff; 
    background-color:#2e2e2e; 
    padding:25px 0px; 
} 
#mob-nav ul li a:hover{ 
    background-color:#2eb187; 
} 
    .mob-nav-btn { 
     position:absolute; 
    left: 275px; 
    top: 18px; 
    line-height: 10px; 
    padding: 16px; 
     cursor:pointer; 
     border-radius: 0px 10px 10px 0px; 
     -moz-border-radius: 0px 10px 10px 0px; 
     -webkit-border-radius: 0px 10px 10px 0px; 
    } 
    .mob-nav-btn > div{ 
     background-color: #f7f7f7; 
    width: 25px; 
     margin-top: 2px; 
    margin-bottom: 2px; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 2px; 
     transition: all 300ms; 
    } 
    .mob-nav-btn:hover > div{ 
     width: 30px; 
     border-radius:0px; 
    }

在反應我試圖設置狀態點擊導航按鈕時.React狀態正在改變，但導航欄未打開。

toggle(){ 
this.setState({ 
    navbar :"active-mob-nav" 
}) 

}

我看到了開發人員工具中的元素，狀態正在發生變化。導航欄不打開有人能解釋我如何切換導航欄上的類，就像我在onClick（）上做的那樣？

來源

2017-09-02 Navaneethan Arun

錯誤的嵌套順序。

使用風格：

#mob-nav.active-mob-nav { 
    transform: translate3d(0,0,0); 
}

而設置的className到頂級的div：

<div id="mob-nav" className={this.state.navbar + " right"}>

https://jsfiddle.net/69z2wepo/85223/

來源

2017-09-02 18:43:04 Andrew

是其工作正常。當我點擊導航按鈕 –

我更新你的小提琴時，我的不良內容正在隱藏。你可以幫我這 –

我剛剛更新了代碼 –

我認爲問題出在你的CSS上，而沒有反應。你CSS（.active-mob-nav #mob-nav）說active-mob-nav有個孩子idmob-nav，而mob-nav有個孩子.active-mob-nav。嘗試更改CSS以獲得預期的行爲

來源

2017-09-02 18:33:11 Panther

備用在撥動類反應

回答

相關問題