4

I'm trying to put some links in a <summary> element, and if the <a> tag doesn't contain anything but an icon <i>, it's not working (a click on it just opens the <details> element…).

My code:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <details>
    <summary>
      <span>Foo</span>
      <span><a href="http://www.google.com">text link</a></span>
      <span><a href="http://www.google.com"><i class="material-icons">send</i></a></span>
    </summary>
    <span>Bar</span>
  </details>
</body>

</html>

Anybody would know what am I missing?

I tried with other icons than the Material ones without results…

Edit: It's a Chrome bug (it's working with Firefox): anybody knows a workaround?

Julien A
  • 111
  • 9
  • What sort of elements are `
    ` and `` supposed to be? I've never seen those as a part of HTML 5.
     – connexo Jan 31 '18 at 09:40
  • 1
    They are. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) – Julien A Jan 31 '18 at 09:44
  • Strange, seems to definitely be a bug. – Xoog Jan 31 '18 at 09:52
  • If I test your snippet, the "text link" link does not open the link, neither in chrome, nor in Firefox?! Neither does the icon link, but in chrome the icon opens/closes the details. The summary is supposed to open/close the details. I fear, there's not a lot, you can do about it. – ghost23 Jan 31 '18 at 09:56
  • @ghost23 It doesn't work here because of security measures (mixed active content in a iframe). You can reproduce the issue saving the snippet as a local file. – FstTesla Jan 31 '18 at 10:01
  • The code snippets don't open links. You could try to copy/paste in a new file to see the "text link" is working. – Julien A Jan 31 '18 at 10:04
  • @Xoog I reported this as a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=807573 – Julien A Jan 31 '18 at 10:08

3 Answers3

4

Here's my workaround:

summary a * {
  pointer-events: none;
}

This makes clicks dispatch directly on the link instead of the inner elements

Philipp Ryabchun
  • 736
  • 1
  • 5
  • 7
1

/* if you want to let open the window of the summary */
    $("#id2").click(function(){
         window.open("http://www.google.com");
      setTimeout(function() { /* because open attribute is added after event detection */
       $("#id").removeAttr("open");
      }, 0);
     });
    /* if you want the same thing as <a> tag */
$("#id2").click(function(){
            $("#id").hide();
         window.location = "http://www.google.com";
     });
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <details id="id">
    <summary>
      <span>Foo</span>
      <span><a href="http://www.google.com">text link</a></span>
      <span id="id2"><a href="http://www.google.com"><i class="material-icons">send</i></a></span>
    </summary>
    <span id="content">Bar</span>
  </details>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  </body>

</html>
1

If I'm not mistaken your problem is when you click on <i> element it opens <details> instead of going to your link. If you write <a> inside <i> then it works.

Notice For some reasons it don't redirect from code snippet in SO. But when I copy this peace of code in a html file and test it, it works fine in chrome either.

    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    
    <body>
      <details>
        <summary>
          <span>Foo</span>
          <span><a href="http://www.google.com">text link</a></span>
          <span><i class="material-icons"><a href="http://www.google.com" style="text-decoration:none;">send</a></i></span>
        </summary>
        <span>Bar</span>
      </details>
    </body>
    
    </html>
Masoud Keshavarz
  • 2,166
  • 9
  • 36
  • 48