javascript - Jquery 工具栏链接不起作用

Question

我正在尝试在网站上实现 toolbar.js，但出于某种原因，当我点击引用的链接(例如 www.google.com)时，它不起作用。

此处解释工具栏:( http://blog.teamtreehouse.com/mini-icon-settings-menu-with-the-jquery-toolbar-plugin#comments )

这是我的代码:

CSS:

.tool-container {
background-color: #d0cbcb;
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%, #d0cbcb), color-stop(100%, #e9e5e5));
background: -moz-linear-gradient(top, #d0cbcb 14%, #e9e5e5 100%);
background: -ms-linear-gradient(top, #d0cbcb 14%,#e9e5e5 100%);
background: linear-gradient(to bottom, #d0cbcb 14%,#e9e5e5 100%);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNCUiIHN0b3AtY29sb3I9IiNkMGNiY2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTllNWU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cbcb', endColorstr='#e9e5e5',GradientType=0 );
border-radius: 3px;
box-shadow: 0px 0px 15px #000;
position: absolute;     }

.tool-container.tool-top, .tool-container.tool-bottom {
height: 34px;
border-bottom: 1px solid #beb8b8 ; /* #B1A9A9 */}

.tool-items {
height: 100%;   }

.tool-top .tool-item, .tool-bottom .tool-item {
float: left;
border-right: 1px solid #e2dfdf;
border-left: 1px solid #9f9898;}

.tool-left .tool-item, .tool-right .tool-item {
height: 34px;
border-top: 1px solid #e2dfdf;
border-bottom: 1px solid #9f9898;}

.tool-item {
height: 100%;
display: block;             
width: 44px;
text-align: center;} 

 .tool-item:first-child {
border-left: none;}

.tool-left .tool-item:first-child, .tool-right .tool-item:first-child {
border-top: 1px solid transparent;}

.tool-item:last-child {
border-right: none;
border-bottom: none;}

.tool-item.selected, .tool-item:hover  {
background: #a79f9f;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a79f9f), color-stop(93%, #e2dfdf));
background: -moz-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
background: -ms-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
background: linear-gradient(to bottom, #a79f9f 0%, #e2dfdf 93%);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3OWY5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iI2UyZGZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a79f9f', endColorstr='#e2dfdf',GradientType=0 );}

.tool-top .tool-item:last-child:hover, .tool-bottom .tool-item:last-child:hover {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;}

.tool-top  .tool-item:first-child:hover, .tool-bottom  .tool-item:first-child:hover {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;}

.tool-left .tool-item:last-child:hover, .tool-right .tool-item:last-child:hover {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;}

.tool-left .tool-item:first-child:hover, .tool-right .tool-item:first-child:hover {
border-top-right-radius: 4px;
border-top-left-radius: 4px;}

.tool-container .arrow {
width:0;
height:0;
position: absolute; 
border-width:7px;
border-style:solid;}

.tool-container.tool-top .arrow {
border-color: #e9e5e5 transparent transparent; 
left: 50%;  
bottom: -14px;
margin-left: -7px;}

.tool-container.tool-bottom .arrow {
border-color: transparent transparent #e9e5e5; 
left: 50%;  
top: -14px;
margin-left: -7px;}

.tool-container.tool-left .arrow {
border-color: transparent transparent transparent #E9E5E5;
top: 50%;
right: -14px;
margin-top: -7px;}

.tool-container.tool-right .arrow {
border-color: transparent #E9E5E5 transparent transparent;
top: 50%;
left: -14px;
margin-top: -7px;}

.demo-link {
color: #89CDE4;
text-decoration: underline;
cursor: pointer;
margin-left: 30px;}

.demo-link:hover {
text-decoration: none;
cursor: pointer;}

JS:

<script type="text/javascript">
$(function(){
  $('#editmenu').toolbar({
  content: '#user-options',
  position: 'right',
  hideOnClick: true
  });
  $('#editmenu').on('toolbarItemClick', function(event){
// when the user clicks an icon we call this function
console.dir(event);
$(this).trigger('click');
  });
});
</script>

这是 HTML:

<span id="editmenu"><em class="icon-comment"></em></span>
              <div id="user-options" class="toolbar-icons" style="display: none;">
           <a href="http://www.google.com/"><em class="icon-comment"></em></a>
            <a href="http://www.yahoo.com/"><em class="icon-edit"></em></a>
            <a href="#"><em class="icon-comment"></em></a>
            <a href="#"><em class="icon-picture"></em></a>
            <a href="#"><em class="icon-facetime-video"></em></a>
            <a href="#"><em class="icon-cog"></em></a>
        </div>

我只懂基本的编码，不懂 js。任何帮助将不胜感激!

Answer 1

无论出于何种原因，$('#editmenu').on('toolbarItemClick', function(event){..}); 函数在 jquery-toolbar 中不起作用 插件。

尝试用这个函数替换它。

$('.tool-item').click(function(){
    console.log($(this).attr('href'));
    window.location = $(this).attr('href');
});