CSS3：點擊面板上的圓形格

我有個面板div裏面那個div我有小round div。當點擊panel div它重定向到另一頁。CSS3：點擊面板上的圓形格

雖然點擊小round div我得到另一個div下面。但是當我點擊小round div然後它也重定向到另一個頁面。我怎樣才能防止這一點？

$(document).ready(function() { 
 
    $('.small_round_inner_div').click (function(){ 
 
     $('.common_cateogory_status_edit_div').slideToggle('slow'); 
 
    }); 
 
});

.panel_div{ 
 
    width:300px; 
 
    height:300px; 
 
    background:#dee5e7; 
 
    position:relative; 
 
    cursor:pointer; 
 
} 
 

 
.small_round_main_div{ 
 
    position:absolute; 
 
    right:15px; 
 
    top:15px; 
 
} 
 

 
.small_round_main_div .small_round_inner_div{ 
 
    width:30px; 
 
    height:30px; 
 
    background:purple; 
 
    border-radius:50%; 
 
} 
 

 
.common_cateogory_status_edit_div { 
 
    background: #fff; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 35px; 
 
    border: thin #ced0d1 solid; 
 
    z-index: 1001; 
 
    width: 130px; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); 
 
    display:none; 
 
} 
 
.common_cateogory_status_edit_div ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.common_cateogory_status_edit_div ul li { 
 
    padding: 5px 15px; 
 
    list-style-type: none; 
 
    color: #838383; 
 
} 
 
.common_cateogory_status_edit_div ul li:hover { 
 
    background: #edf1f2; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="https://www.google.com/"> 
 

 
<div class="panel_div"> 
 
Some Text 
 
    <div class="small_round_main_div"> 
 
    <div class="small_round_inner_div"></div> 
 
    <div class="common_cateogory_status_edit_div fadeIn animated" > 
 
     <ul> 
 
      <li><span>Option 1</span></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
</a>

任何幫助將是巨大的。

來源

2017-10-04 Rishi

如果您對DOM樹上的元素使用事件，則希望防止默認行爲，並且可能也會停止事件的傳播。

$(document).ready(function() { 
 
    $('.small_round_inner_div').click(function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault() 
 
    $('.common_cateogory_status_edit_div').slideToggle('slow'); 
 
    }); 
 
});

.panel_div { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: #dee5e7; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.small_round_main_div { 
 
    position: absolute; 
 
    right: 15px; 
 
    top: 15px; 
 
} 
 

 
.small_round_main_div .small_round_inner_div { 
 
    width: 30px; 
 
    height: 30px; 
 
    background: purple; 
 
    border-radius: 50%; 
 
} 
 

 
.common_cateogory_status_edit_div { 
 
    background: #fff; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 35px; 
 
    border: thin #ced0d1 solid; 
 
    z-index: 1001; 
 
    width: 130px; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); 
 
    display: none; 
 
} 
 

 
.common_cateogory_status_edit_div ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.common_cateogory_status_edit_div ul li { 
 
    padding: 5px 15px; 
 
    list-style-type: none; 
 
    color: #838383; 
 
} 
 

 
.common_cateogory_status_edit_div ul li:hover { 
 
    background: #edf1f2; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="https://www.google.com/"> 
 
    <div class="panel_div"> 
 
    Some Text 
 
    <div class="small_round_main_div"> 
 
     <div class="small_round_inner_div"></div> 
 
     <div class="common_cateogory_status_edit_div fadeIn animated"> 
 
     <ul> 
 
      <li> 
 
      <span>Option 1</span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</a>

來源

2017-10-04 11:55:22

我使用角度2。 – Rishi

@Rishi你是什麼意思。我的答案不能做你想要的嗎？ –

實際情況是我正在角2中開發它。所以'event.stropPropagation（）'可能會起作用嗎？ – Rishi

接近每格與<a></a>標籤，不要用它關閉所有

來源

2017-10-04 11:57:12

只需添加e.preventD EFAULT（）;上點擊功能添加（E）

$(document).ready(function() { 
 
    $('.small_round_inner_div').click (function (e){ 
 
     e.preventDefault(); 
 
     $('.common_cateogory_status_edit_div').slideToggle('slow'); 
 
    }); 
 
});

.panel_div{ 
 
    width:300px; 
 
    height:300px; 
 
    background:#dee5e7; 
 
    position:relative; 
 
    cursor:pointer; 
 
} 
 

 
.small_round_main_div{ 
 
    position:absolute; 
 
    right:15px; 
 
    top:15px; 
 
} 
 

 
.small_round_main_div .small_round_inner_div{ 
 
    width:30px; 
 
    height:30px; 
 
    background:purple; 
 
    border-radius:50%; 
 
} 
 

 
.common_cateogory_status_edit_div { 
 
    background: #fff; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 35px; 
 
    border: thin #ced0d1 solid; 
 
    z-index: 1001; 
 
    width: 130px; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); 
 
    display:none; 
 
} 
 
.common_cateogory_status_edit_div ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.common_cateogory_status_edit_div ul li { 
 
    padding: 5px 15px; 
 
    list-style-type: none; 
 
    color: #838383; 
 
} 
 
.common_cateogory_status_edit_div ul li:hover { 
 
    background: #edf1f2; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="https://www.google.com/"> 
 

 
<div class="panel_div"> 
 
Some Text 
 
    <div class="small_round_main_div"> 
 
    <div class="small_round_inner_div"></div> 
 
    <div class="common_cateogory_status_edit_div fadeIn animated" > 
 
              <ul> 
 
               <li> 
 
               
 
                             <span>Option 1</span> 
 
               </li> 
 
           
 
              </ul> 
 
             </div> 
 
    </div> 
 
</div> 
 
</a>

來源

2017-10-04 11:57:25 alim511

所有你需要做的就是添加event.stopPropagation（）點擊函數內部，如下

innerDiv.click(function(e) { event.stopPropagation() }

欲瞭解更多信息，請查閱的文檔event.stopPropagation（） https://api.jquery.com/event.stoppropagation/

來源

2017-10-04 13:01:30

CSS3：點擊面板上的圓形格

回答

相關問題