Question

我在这里有一个示例，其中有一些随机div，当点击链接到它们的按钮时，我想要一个工具提示切换9hide / show）我可以很容易地做 - 但这是我的问题：

1）当你点击另一个按钮时，另一个工具提示不会隐藏，所以我可以打开和关闭，但是当点击另一个按钮时不会切换。

2）以前，当我进行一次切换时，我现在可以使用我更新的代码切换课程，但情况并非如此，似乎忽略了它。

3）我有的例子是另一种方式，而不是：

<input type="button" id="" class="buttons" value="tooltip1"></input>

有一个div但我被困在哪里是从我的jQuery中拉出值的位置，因为div没有像表单元素那样的值状态？

var div= $("#"+this.value);

对不起，如果这看起来有点傻，我是jQuery的新手并且随着我的学习而学习。任何指导都将不胜感激。

Answer 1

试试这个jquery代码：

$(".buttons").click(function () {
    tooltip = "#"+$(this).val();
    $('.tooltip').not(tooltip).hide()

    if ($(tooltip).is(":visible")) {
        $(tooltip).hide().removeClass("selected")
    } else {
        $(tooltip).show().addClass("selected")
    }
});

并查看此jsfiddle。

Answer 2

如果我理解正确，只需添加第二行代码（第一行代码作为参考，在哪里添加代码）：

var tooltip= $("#"+this.value);
$(".tooltip").hide();

Answer 3

你可以试试这个：

$(".buttons").click(function () {

    var tooltip= $("#"+this.value);        
    var isVisible = tooltip.is(":visible");
    $('.tooltip').hide();
    if (isVisible) {
        tooltip.hide();
    } else {
        tooltip.show();
    }

    if ($('.tooltip').is(":visible")) {
        $('?').addClass("selected"); 
    } else {
        $('?').removeClass("selected"); 
    }

});

这样您就可以关闭与tooltip divs相关的所有div和切换button。

Answer 4

请试试这个

    $(".buttons").click(function () {
      var button = $(this);
      var buttons = $(".buttons");
      var tooltip = $("#"+this.value);

      if(button.hasClass("active")){
        $(".tooltip").hide();
        buttons.removeClass("active");
      }else {
        buttons.removeClass("active");
        $(".tooltip").hide();                    
        tooltip.toggle();
        button.addClass("active");
      }
 });

jsfiddle

切换div并将类激活添加到它们

4 个答案: