Question

我想在关注或点击相对<details>元素时打开<link>元素

<section>
    <ul>
        <li><a href="#job-1">1</a></li>
        <li><a href="#job-2">2</a></li>
        <li><a href="#job-3">3</a></li>
    </ul>
    <div>
        <details>
            <summary id="job-1">some text</summary>
            <table>       
            </table>
        </details>

        <details>
            <summary id="job-2">some text</summary>
            <table>
            </table>
        </details>

        <details>
            <summary id="job-3">some text</summary>
            <table>
            </table>
        </details>
    </div>
</section>

如果可能，我想用javascript

这样做

Answer 1

<section>
    <ul>
        <li><a href="#job-1">1</a></li>
        <li><a href="#job-2">2</a></li>
        <li><a href="#job-3">3</a></li>
    </ul>
    <div>
        <div class="details" id="job-1">
            <summary>some text</summary>
            <table>       
            </table>
        </div>

        <div class="details" id="job-2">
            <summary>some text</summary>
            <table>
            </table>
        </div>

        <div class="details" id="job-3">
            <summary>some text</summary>
            <table>
            </table>
        </div>
    </div>
</section>

仅使用css：

的CSS：

.details { display:none; }
.details:focus { display:block; }

更多：https://developer.mozilla.org/fr/docs/Web/CSS/:focus

或使用css和js：

的CSS：

.details { display:none; }

JS：

function hideAllDetails(){
    document.getElementByClassName("details").style = '';
}
document.getElementById("job-1").addEventListenner('focus',function(evvent){
     hideAllDetails();
     event.target.style = "display:block";
});
// duplicate for every elements you want

或使用jquery

的CSS：

.details { display:none; }

JS：

$('.details').on('focus',function(){
   $('.details').css('display','none');
   $(this).css('display','block');
});

Answer 2

您可以循环遍历所有a标记，并为每个标记附加一个点击事件监听器，以触发相关summary元素的点击：

更新：由于您可能不想在details已经打开时关闭它，我添加了一张支票。

var links = document.querySelectorAll('section ul li a'); // would be better to use an id or at least classes here...

for (var i=0;i<links.length;i++) {
  links[i].addEventListener('click', function() {
    var summaryEl = document.querySelector(this.getAttribute('href'));
    // only trigger if the details are not already open
    if (!summaryEl.parentNode.open) {
      summaryEl.click();
    }
  });
}

<section>
    <ul>
        <li><a href="#job-1">1</a></li>
        <li><a href="#job-2">2</a></li>
        <li><a href="#job-3">3</a></li>
    </ul>
    <div>
        <details>
            <summary id="job-1">some text</summary>
            <table> 
            <tr><td>test content</td></tr>
            </table>
        </details>

        <details>
            <summary id="job-2">some text</summary>
            <table>
            <tr><td>test content</td></tr>
            </table>
        </details>

        <details>
            <summary id="job-3">some text</summary>
            <table>
            <tr><td>test content</td></tr>
            </table>
        </details>
    </div>
</section>

Answer 3

正如其他人发布了以JavaScript为中心的答案，我想我会使用仅使用CSS的不同解决方案。如果您稍微重构HTML以使detail元素按照其相应的按钮，则可以使用纯CSS执行此操作。

然后您可以通过CSS重新/移动每个细节部分。示例如下：

.btn{
  display:block;
  cursor:pointer;
  width:60px;
  height:20px;
}

.next{
  display:none;
}

.btn:focus + .next{
  display:block;
}

<div class="btn" tabindex="1">Click Me</div>
<div class="next">
  this should be showing on click
</div>
<div class="btn" tabindex="1">Click Me</div>
<div class="next">
  this should be showing on click
</div>

使用焦点事件来显示另一个元素

3 个答案: