下面的片段可以给你一个你可以做什么的想法。

function toggleClass() {
  document.querySelector('.identifier').classList.toggle('hide');
}

.hide {
  display: none;
}

.image {
  height: 20px;
  width: 20px;
}

<img onClick="toggleClass()" class="image" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png">

<div class="identifier">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</div>

您可以通过在该图像元素上创建onclick事件来解决此问题。

let visible = true; // true => default visible, false => default not visible
let target = document.getElementById("target");
let toggle = document.getElementById("toggle");
if(!visible) target.style.display = 'none';
 
toggle.onclick = function() {
  if(visible) {
    visible = false;
  } else {
    visible = true;
  }
  target.style.display = visible ? '' : 'none';
}

#toggle:active {
    position: relative;
    top: 1px;
}

<div>
  <img id="toggle" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" width="50"/>
</div>
<div id="target">
  <input type="radio">
  <label>Radio 1</label>
  <input type="radio">
  <label>Radio 2</label>
</div>

在图像上创建一个eventListener，并传入事件以用于DOM中的引用，然后可以使用innerHTML创建和添加任何HTML。

const image = document.querySelector('#cog');

function showElement(e) {
  const el = "Enter something: <input class='myinput' value='some value' type='text'><button class='button' onclick='showEntry(event)'>Submit</button>";
  const parent = e.target.closest('#parent');
  const target = parent.querySelector('.target');
  target.innerHTML = el
}

image.addEventListener('click', showElement);

function showEntry(event){
  const parent = event.target.closest('#parent');
  const target = parent.querySelector('.myinput');
  console.log(`${target.value} has passed through the onlick method added to the constant called el from the showEntry method.`)
}

#cog {
  height: 100px;
  width: 100px;
}

<div id="parent">
  <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" id="cog">
  <div class="target"></div>
</div>

或者，您可以切换一个类，隐藏您希望默认显示的元素，然后使用el.classList.toggle()切换它。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

你可以使用JavaScript和CSS来实现这一点。下面是一个示例代码，你可以根据自己的需要进行修改：

const toggleContainer = document.querySelector('.toggle-container');
const toggleElement = document.querySelector('.toggle-element');

toggleContainer.addEventListener('click', function() {
  toggleElement.style.display = toggleElement.style.display === 'none' ? 'block' : 'none';
});

.toggle-element {
  display: none;
}
img{
width:100px;
height:100px
}

<div class="toggle-container">
  <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" alt="Toggle Image">
  <div class="toggle-element">
    <input type="radio">
     <label>Radio 1</label>
    <input type="radio">
     <label>Radio 2</label>
  </div>
</div>