Question

这是我的代码：

var workshops = document.querySelector('#workshops');
var cross_one = document.querySelector('#cross_one');
var workshops_navigation = document.querySelector('#workshops_navigation');
workshops.addEventListener('click', function (event) {
      if (cross_one.style.display == "") {
          cross_one.style.display = "none";
        workshops_navigation.style.display = "block";
      } else {
          cross_one.style.display = "";
          workshops_navigation.style.display = "none";
      }
    }
  );



var works = document.querySelector('#works');
var cross_two = document.querySelector('#cross_two');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
      if (cross_two.style.display == "") {
          cross_two.style.display = "none";
        works_navigation.style.display = "block";
      } else {
          cross_two.style.display = "";
          works_navigation.style.display = "none";
      }
    }
  );



var projects = document.querySelector('#projects');
var cross_three = document.querySelector('#cross_three');
var projects_navigation = document.querySelector('#projects_navigation');
projects.addEventListener('click', function (event) {
      if (cross_three.style.display == "") {
          cross_three.style.display = "none";
        projects_navigation.style.display = "block";
      } else {
          cross_three.style.display = "";
          projects_navigation.style.display = "none";
      }
    }
  );

#workshops {
  left: 4vw;
  top: 32vh;
  position: absolute;
}

#works {
  right: 10vw;
  top: 5vh;
  position: absolute;
}

#projects {
  right: 5vw;
  top: 20vh;
  position: absolute;
}

#workshops_icon, #works_icon, #projects_icon {
  cursor: pointer;
  width: 354px;
}

#workshops_navigation, #works_navigation, #projects_navigation {
  font-size: 30px;
  top: 10px;
  margin-left: 15px;
  position: absolute;
  display: none;
  line-height: 100%
}

<div id="workshops">
<div id="workshops_icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 235.1 299.4" style="enable-background:new 0 0 235.1 299.4;" xml:space="preserve">
<polygon fill="white" points="0.8,298.5 234.3,298.5 234.3,0.8 0.8,0.8 0.8,298.5 "/>
<polygon id="cross_one"  points="233.6,299.1 117.6,151 1.5,299.1 0.2,298 116.5,149.7 0.2,1.3 1.5,0.3 117.6,148.3 233.6,0.3 
	234.9,1.3 118.6,149.7 234.9,298 "/>
<path d="M235.1,299.4v-1.7V1.7V0h-1.7H1.7H0v1.7v296v1.7h1.7h231.8H235.1L235.1,299.4z M233.5,297.7H1.7V1.7h231.8
	V297.7L233.5,297.7z"/>
</svg>
<div id="workshops_navigation">
<a href="#">Workshops</a>
</div>
</div>
</div>


<div id="works">
<div id="works_icon" class="svg_color_change icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 235.1 299.4" style="enable-background:new 0 0 235.1 299.4;" xml:space="preserve">
<polygon fill="white" points="0.8,298.5 234.3,298.5 234.3,0.8 0.8,0.8 0.8,298.5 "/>
<polygon id="cross_two"  points="233.6,299.1 117.6,151 1.5,299.1 0.2,298 116.5,149.7 0.2,1.3 1.5,0.3 117.6,148.3 233.6,0.3 
	234.9,1.3 118.6,149.7 234.9,298 "/>
<path class="st1" d="M235.1,299.4v-1.7V1.7V0h-1.7H1.7H0v1.7v296v1.7h1.7h231.8H235.1L235.1,299.4z M233.5,297.7H1.7V1.7h231.8
	V297.7L233.5,297.7z"/>
</svg>
<div id="works_navigation">
<a class="linky" href="#">Works</a>
</div>
</div>
</div>


<div id="projects">
<div id="projects_icon" class="svg_color_change icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 235.1 299.4" style="enable-background:new 0 0 235.1 299.4;" xml:space="preserve">
<polygon fill="white" points="0.8,298.5 234.3,298.5 234.3,0.8 0.8,0.8 0.8,298.5 "/>
<polygon id="cross_three"  points="233.6,299.1 117.6,151 1.5,299.1 0.2,298 116.5,149.7 0.2,1.3 1.5,0.3 117.6,148.3 233.6,0.3 
	234.9,1.3 118.6,149.7 234.9,298 "/>
<path d="M235.1,299.4v-1.7V1.7V0h-1.7H1.7H0v1.7v296v1.7h1.7h231.8H235.1L235.1,299.4z M233.5,297.7H1.7V1.7h231.8
	V297.7L233.5,297.7z"/>
</svg>
<div id="projects_navigation">
<a href="#">Link A</a><br>
<a href="#">Link B</a><br>
<a href="#">Link C</a><br>
</div>
</div>
</div>

当前，如果单击图标，则具有切换功能。很好但是：如果点击了链接，则不应切换此操作。

对不起，奇怪的代码。

如果有人可以在这里发布解决方案，那就太好了！我真的很感激。

Thaaaaanks！祝大家一切顺利！

Answer 1

检查此jsfiddle

https://jsfiddle.net/hd1c493a/1/

HTML：

    <div id="works">
  <div id="works_icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 235.1 299.4" style="enable-background:new 0 0 235.1 299.4;" xml:space="preserve">
<polygon fill="white" points="0.8,298.5 234.3,298.5 234.3,0.8 0.8,0.8 0.8,298.5 "/>
<polygon id="cross_one"  points="233.6,299.1 117.6,151 1.5,299.1 0.2,298 116.5,149.7 0.2,1.3 1.5,0.3 117.6,148.3 233.6,0.3 
    234.9,1.3 118.6,149.7 234.9,298 "/>
<path d="M235.1,299.4v-1.7V1.7V0h-1.7H1.7H0v1.7v296v1.7h1.7h231.8H235.1L235.1,299.4z M233.5,297.7H1.7V1.7h231.8
    V297.7L233.5,297.7z"/>
</svg>

    <div id="works_navigation">
      <a href="#" class='link'> My Link 1 </a><br/>
      <a href="#" class='link'> My Link 2 </a><br/>
      <a href="#" class='link'> My Link 3 </a><br/>

    </div>
  </div>

JS：

  var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
      if (cross_one.style.display == "") {
          cross_one.style.display = "none";
        works_navigation.style.display = "block";
      } else {
          cross_one.style.display = "";
          works_navigation.style.display = "none";
      }
    }
  );
document.querySelectorAll('.link').forEach(function(link) { 
  link.addEventListener('click', function (event) {
     event.stopPropagation();
})
})
;

如果单击<a>，则禁用切换功能

1 个答案: