Javascript img src 变体？答案

【问题标题】：Javascript img src variation?Javascript img src 变体？
【发布时间】：2015-09-28 00:37:06
【问题描述】：

我正在使用响应式导航插件在我目前正在处理的这个网站上进行导航，缩小导航的标签在 javascript 文件中，我想让它成为菜单按钮而不是文本.

有什么办法可以做到吗？（我在下面的代码中将我想要成为图像的部分更改为“这就是我想要成为图像”）

var ResponsiveNav = function (el, options) {
    var i;

    /**
     * Default options
     * @type {Object}
     */
    this.options = {
      animate: true,                    // Boolean: Use CSS3 transitions, true or false
      transition: 284,                  // Integer: Speed of the transition, in milliseconds
      label: "THIS IS WHAT I WANT TO BE AN IMAGE",                    // String: Label for the navigation toggle
      insert: "before",                 // String: Insert the toggle before or after the navigation
      customToggle: "",                 // Selector: Specify the ID of a custom toggle
      closeOnNavClick: false,           // Boolean: Close the navigation when one of the links are clicked
      openPos: "relative",              // String: Position of the opened nav, relative or static
      navClass: "nav-collapse",         // String: Default CSS class. If changed, you need to edit the CSS too!
      navActiveClass: "js-nav-active",  // String: Class that is added to <html> element when nav is active
      jsClass: "js",                    // String: 'JS enabled' class which is added to <html> element
      init: function(){},               // Function: Init callback
      open: function(){},               // Function: Open callback
      close: function(){}               // Function: Close callback
    };

非常感谢。

【问题讨论】：

我相信您想将图像的路径存储在那里，然后在定义图像的 src 属性时引用该对象。
你好，插件是responsive-nav.com

标签： javascript responsive-nav

【解决方案1】：

您将图像添加到页面的 html 中，给它一个 id，然后将 id 添加到 customToggle 选项（参见下面的“myImg”示例）

例如

<img src="myimg.png" id="myImg">
<nav class="nav-collapse">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

var nav = responsiveNav(".nav-collapse", { // Selector
  animate: true, // Boolean: Use CSS3 transitions, true or false
  transition: 284, // Integer: Speed of the transition, in milliseconds
  label: "Menu", // String: Label for the navigation toggle
  insert: "before", // String: Insert the toggle before or after the navigation
  customToggle: "myImg", // Selector: Specify the ID of a custom toggle
  closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
  openPos: "relative", // String: Position of the opened nav, relative or static
  navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
  navActiveClass: "js-nav-active", // String: Class that is added to  element when nav is active
  jsClass: "js", // String: 'JS enabled' class which is added to  element
  init: function(){}, // Function: Init callback
  open: function(){}, // Function: Open callback
  close: function(){} // Function: Close callback
});

【讨论】：

有什么方法可以让按下菜单按钮时图像消失？所以只有导航显示
您可以为您的图像添加一个事件监听器，以便在按下图像时更改其样式：document.getElementById("myImg").addEventListener("click", function(){ this.style.显示 = '无'; });