Question

我想要的是：

单击电话按钮时，请拨打电话号码。出现，电子邮件（如果显示）消失。

单击电子邮件按钮时，电话号码（如果显示）将消失并显示电子邮件。

这是我的jsfiddle https://jsfiddle.net/adzk6tnv/。

当我最初没有隐藏电子邮件ID时，它可以正常工作。当我点击电话按钮时，电子邮件ID消失，电话号码消失。出现，但最初隐藏两者时不会发生同样的情况。

有人可以帮帮我吗？

<html>
<head>
<script>

$(document).ready(function(){
    $(".no").hide();
    $(".email").hide();

    if($(".email").is(":visible")){
        $(".phone").click(function(){
        $(".email").slideToggle(function(){
            $(".no").fadeIn();
        })})
    }
    else {
        $(".phone").click(function(){
            $(".no").slideToggle();
        })
    }

    if($(".email").is(":visible")){
        $(".mail").click(function(){
        $(".no").slideToggle(function(){
            $(".email").slideToggle();
        })})
    }
    else {
        $(".mail").click(function(){
            $(".email").slideToggle();
        })
    }       
})

</script>
</head>

<body>
<div class="row">
    <h4>Name</h4>
    <p class="text-muted">Designation</p>
    <p class="text-muted no">+91 8888888888</p>
    <p class="text-muted email">something@gmail.com</p>
    <ul>
        <li>
            <a class="phone" href="#">phone</a>
        </li>
        <li>
            <a class="mail"href="#">email</a>
        </li>
     </ul>
</div>
</body>
</html>

Answer 1

这是一个简化版本。

它会滑动不需要的数据。（如果不可见，它什么都不做。）

完成后，它会切换所需数据：

＆＃13;

$(document).ready(function() {
  $('.no, .email').hide();

  $('.phone').click(function() {
    $('.email').slideUp(function() {
      $('.no').slideToggle();
    });
  });

  $('.mail').click(function() {
    $('.no').slideUp(function() {
      $('.email').slideToggle();
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

  <h4>Name</h4>

  <p class="text-muted">Designation</p>

  <p class="text-muted no">+91 8888888888</p>
  <p class="text-muted email">something@gmail.com</p>
  <ul>
    <li><a class="phone" href="#">phone</a>
    </li>
    <li><a class="mail" href="#">email</a>
    </li>

  </ul>
</div>

＆＃13;

Answer 2

问题是因为如果.phone可见，您只绑定.email的点击处理程序：

if($(".email").is(":visible")){

    $(".phone").click(function(){
    $(".email").slideToggle(function(){
        $(".no").fadeIn();

    })})
}

由于.email开始隐藏，因此您永远不会绑定处理程序，因此单击它不会做任何事情。

Answer 3

与Rich Hitchcock的答案一样，我已经产生了你想要的结果。 slideUp计时并不简洁明确，但它确实展示了更多的时间控制以及设置条件is(':visible')语句的原始意图。

<强>的jQuery

//Show Hide onClick functionality - Alexander Dixon 2015
//http://stackoverflow.com/questions/31710666/promblem-in-hide-and-show
//http://codebeautify.org/htmlviewer/
var $phoneEmail = $('li > a'),
    $emailLink = $('li a.mail'),
    $phoneLink = $('li a.phone'),
    $viewPhone = $('p.no'),
    $viewEmail = $('p.email');

//Initially hide the phone and email fields function declaration
function hideBoth() {
    $viewPhone.hide();
    $viewEmail.hide();
}

//Run the function to hide the fields
hideBoth();

//Prevent the link from behaving like a link
$phoneEmail.on('click', function(e) {
    e.preventDefault();
});

//Bind a mouse down (very similar to a click) event to the email link that will slide show email view in 300 milliseconds
$emailLink.on('mousedown', function() {
    if($viewPhone.is(':visible')) {
        $viewPhone.slideUp(205);
    }
    $viewEmail.slideToggle();
});

//Bind a mouse down (very similar to a click) event to the phone link that will slide show phone view in 300 milliseconds
$phoneLink.on('mousedown', function() {
    if($viewEmail.is(':visible')) {
        $viewEmail.slideUp(205);
    }
    $viewPhone.slideToggle();
});

<强> HTML

<div class="row">
    <h4>Name</h4>
    <p class="text-muted">Designation</p>
    <p class="text-muted no">+91 8888888888</p>
    <p class="text-muted email">something@gmail.com</p>
    <ul>
        <li>
            <a class="phone" href="#">Phone</a>
        </li>
        <li>
            <a class="mail"href="#">Email</a>
        </li>
    </ul>
</div>

无法隐藏和显示

3 个答案: