Question

我试图在<summary>元素中添加一些链接，如果<a>标记除了图标<i>之外不包含任何内容，那么它就是＆＃39 ; s不起作用（点击它只会打开<details>元素...）。

我的代码：

＆＃13;

<!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>

＆＃13;

任何人都知道我错过了什么？

我尝试使用其他图标而非材质图标而没有结果......

修改：这是一个Chrome错误（它正在使用Firefox）：有人知道解决方法吗？

Answer 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>

Answer 2

如果我没有弄错你的问题就是当你点击<i>元素时，它会打开<details>而不是转到你的链接。如果你在<a>内写<i>，那就可以了。

注意由于某些原因，它不会从SO中的代码段重定向。但是当我在html文件中复制这段代码并对其进行测试时，它在chrome中工作正常。

    <!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>

Answer 3

这是我的解决方法：

summary a * {
  pointer-events: none;
}

这使点击直接分配在链接上，而不是内部元素上

链接无法处理<summary>元素中的图标

3 个答案: