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：点击面板上的圆形格

回答

相关问题