Fokus Ereignis verwendet ein anderes Element

Question

zeigen i <details> Element öffnen möchte, wenn ein relativ <link> Element oder angeklickt möglich

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

fokussiert wird, wenn ich das Javascript mit möchte

Answer 1

können Sie Schleife über die alle a Tags und heften sich an jeden von ihnen ein Klick-Ereignis-Listener, die den Klick des zugehörigen löst summary Element:

Update: Wie Sie p Robably will die details nicht schließen, wenn sie bereits geöffnet sind, fügte ich einen Scheck dafür hinzu.

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 2

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

tun Nur mit css:

css:

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

Mehr: https://developer.mozilla.org/fr/docs/Web/CSS/:focus

Oder mit CSS und 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 

Oder mit jquery

css:

.details { display:none; } 

js:

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

Answer 3

Wie andere JavaScript centric Antworten gepostet habe ich dachte, ich mit einer anderen Lösung, die nur mit Hilfe von CSS läuten würde. Wenn Sie Ihren HTML-Code leicht neu strukturieren, sodass das Detailelement der entsprechenden Schaltfläche folgt, können Sie dies mit reinem CSS tun.

Sie könnten dann jeden Detailabschnitt über CSS neu gestalten/verschieben. Beispiel wie folgt:

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