javascript - 单击 div 中除超链接之外的所有元素时如何切换 div 的显示？

Question

每当我单击“.summary”div 时，我都会使用下面的 javascript 来切换“.detail”的显示。我希望在“.summary”div 中引入一个链接，但我不想在单击该链接时切换“.detail”div。我应该如何修复代码？

$(document).ready(function(){
    $(document).on("click",".summary",function(){
        $(this).next(".detail").toggleClass("show")
    })
});

上一条:

html.Div([
    html.Div([html.H5(corner, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns summary'),
    html.Div([html.H5(int_status, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns'),
    html.Div([html.H5(ext_status, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns'),
], className='row summary'),

html.Div([
    html.Div([dcc.Graph(id=f'binning-{corner}', figure=create_timing_graphs(partition, corner), 
        config={'displayModeBar':False})], 
        style={'paddingLeft':'40px'})
], style={**card_colors['default']}, className='row detail'),

新:

html.Div([
    html.Div([html.H5(corner, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns summary'),
    html.Div([html.H5(int_status, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns'),
    html.Div([html.H5(ext_status, style={'paddingLeft':'25px', 'color':'#fff'})], className='three columns'),
    html.Div(html.A(children='\u2630', style={'paddingLeft':'60px', 'color':'#fff'}, href=f'http://10.38.234.26:5000/{partition}_timing_summary.xlsx'), style={'marginTop':'5px'}, className='one column offset-by-two')
], className='row'),

html.Div([
    html.Div([dcc.Graph(id=f'binning-{corner}', figure=create_timing_graphs(partition, corner), 
        config={'displayModeBar':False})], 
        style={'paddingLeft':'40px'})
], style={**card_colors['default']}, className='row detail'),

Answer 1

您可以检查目标元素

$(document).on('click', '.summary', function(e){
  var target = e.target;

  if(target.tagName !== 'A'){
    $(this).next('.detail').toggleClass('show');
  }
});