我有一个网站http://www.thebalancedbody.ca/，左侧有一个弹出式联系表单（联系人），其标识为<div id="mycontactform">。
页脚中还有一个名为CONTACT US的链接
<a href="#" title="CONTACT US">CONTACT US</a>
我需要此链接来触发弹出式联系表单，就好像手动点击了联系人选项卡一样。
这可能，我该怎么做？
由于
乔纳森
答案 0 :(得分：3)
所有建议的解决方案都应该有效。但我认为你需要阻止锚的默认动作。
在＆lt; script＆gt;中添加此代码＆lt; head＆gt;中的标记你的文件部分。
$(document).ready(function(){
$("#contact").click(function(event){
event.preventDefault(); //stops the browser from following the link
$("#contactable").click(); //opens contact form
alert("Showing mycontactform"); //remove this when it's working
});
});
您需要在联系人锚点添加“id”标记：
<a href="#" id="contact" title="Contact Us">CONTACT US</a>
您还需要确保在＆lt; head＆gt;中包含jQuery。你的文件部分。
在＆lt; head＆gt;之后添加此行标记：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
答案 1 :(得分：1)
使用$("#divId").click();。这将触发具有指定ID的div中的click事件。
下面给出的代码经过测试可用于Chrome和IE8。
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myDiv").click(function() {
alert('Clicked!');
});
$("#myLink").click(function() {
$("#myDiv").click();
});
});
</script>
</head>
<body>
<div id="myDiv">Some Text</div>
<a id="myLink" href="#">Link</a>
</body>
</html>
答案 2 :(得分：1)
试试这个：
$(function(){
$("#contact").click(function () {
$("#contactable").trigger('click');
});
});
<a title="CONTACT US" href="#" id="contact">CONTACT US</a>
答案 3 :(得分：1)
$(function() {
$('#foo').bind('click', function() {
alert($(this).text());
});
// I used mouseover just because and
// for no reason. could be anything
$('#bar').mouseover(function() {
$('#foo').trigger('click');
});
});
HTML：
<a href="#" id="foo">foo</a>
<a href="#" id="bar">boo</a>
答案 4 :(得分：0)
编辑： 它看起来像你想要的工作，除了页面不在顶部。如果是这种情况，请查看jQuery的scrollTop函数。看起来“接触式”div似乎没有连接到接触部分，这可能是个问题。如果这不是您的问题，请编辑问题以描述您当前的问题，因为它似乎是与插件的交互，而不是触发div点击。祝你好运！
旧答案（不再适用于来源已更改）：
您的情况中的问题是选择器（#contact - 获取id等于'contact'的元素）：
$(function(){
$("#contact").click(function () {
$("#contactable").trigger('click');
});
});
与您要将事件添加到的元素不匹配：
<a href="#" title="CONTACT US">CONTACT US</a>
我的建议是为每个要触发“可联系”点击的元素添加一个类，如下所示：
<a href="#" class="contactable" title="CONTACT US">CONTACT US</a>
和
<a title="CONTACT US" href="#" id="contact" class="contactable">CONTACT US</a>
然后更改您的选择器以使用该类分配单击功能：
$(function(){
$(".contactable").click(function () {
$("#contactable").trigger('click');
});
});
答案 5 :(得分：0)
我不得不承认失败了。我不相信有基于上述答案的解决方案（虽然我知道它们在测试环境中工作），但它们在我的确切情况下不起作用。
原因是如果您在http://www.thebalancedbody.ca/ DIV #contactable
不在源头公开，所以无论我做什么，这些方法都行不通。弹出窗口的关联javascript在这里，也许会给出一些线索？
/*
* contactable 1.2.1 - jQuery Ajax contact form
*
* Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Revision: $Id: jquery.contactable.js 2010-01-18 $
*
*/
//extend the plugin
(function($){
//define the new for the plugin ans how to call it
$.fn.contactable = function(options) {
//set default options
var defaults = {
name: 'Name',
email: 'Email',
message : 'Message',
subject : 'A contactable message',
label_name: 'Name',
label_email: 'E-Mail',
label_website: 'Website',
label_feedback: 'Your Feedback',
label_send: 'SEND',
recievedMsg : 'Thankyou for your message',
notRecievedMsg : 'Sorry but your message could not be sent, try again later',
disclaimer: 'Please feel free to get in touch, we value your feedback',
hide_email: 'false',
hide_website: 'false',
fileMail: 'mail.php',
hideOnSubmit: true
};
//call in the default otions
var options = $.extend(defaults, options);
//act upon the element that is passed into the design
return this.each(function(options) {
//construct the form
div_form = '<div id="contactable"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder">';
div_form += '<p><label for="name">'+defaults.label_name+' <span class="red"> * </span></label><br /><input id="name_mc" class="contact" name="name" /></p>';
if(defaults.hide_email == 'false'){
div_form += '<p><label for="email">'+defaults.label_email+' <span class="red"> * </span></label><br /><input id="email_mc" class="contact" name="email" /></p>';
}
if(defaults.hide_website == 'false'){
div_form += '<p><label for="email">'+defaults.label_website+' <span class="red"> * </span></label><br /><input id="website_mc" class="contact" name="url" /></p>';
}
div_form += '<p><label for="comment">'+defaults.label_feedback+' <span class="red"> * </span></label><br /><textarea id="comment_mc" name="comment" class="comment" rows="4" cols="30" ></textarea></p>';
div_form += '<p><input class="submit" type="submit" value="'+defaults.label_send+'"/></p>';
div_form += '<p class="disclaimer">'+defaults.disclaimer+'</p></div></form>';
$(this).html(div_form);
//show / hide function
$('div#contactable').toggle(function() {
$('#overlay').css({display: 'block'});
$(this).animate({"marginLeft": "-=5px"}, "fast");
$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
$(this).animate({"marginLeft": "+=387px"}, "slow");
$('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
},
function() {
$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
$(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
});
//validate the form
$("#contactForm").validate({
//set the rules for the fild names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
comment: {
required: true
}
},
//set messages to appear inline
messages: {
name: "",
email: "",
url: "",
comment: ""
},
submitHandler: function() {
$('.holder').hide();
$('#loading').show();
name_val = $('#contactForm #name_mc').val();
if(defaults.hide_email == 'false') email_val = $('#contactForm #email_mc').val();
else email_val = 'nothing';
if(defaults.hide_website == 'false') website_val = $('#contactForm #website_mc').val();
else website_val = 'nothing';
comment_val = $('#contactForm #comment_mc').val();
$.post(defaults.fileMail,{subject:defaults.subject, name: name_val, email: email_val, website: website_val, comment:comment_val},
function(data){
$('#loading').css({display:'none'});
if( data == 'success') {
$('#callback').show().append(defaults.recievedMsg);
if(defaults.hideOnSubmit == true) {
//hide the tab after successful submition if requested
$('#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
$('div#contactable').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
}
} else {
$('#callback').show().append(defaults.notRecievedMsg);
}
});
}
});
});
};
})(jQuery);
另一个可能有用的文件是： -
<?php
/*
Plugin Name: Magic Contact
Plugin URI: http://blog.hunk.com.mx/magic-contact/
Description: is a simple and Elegant contact form for Wordpress, taking as it bases to <a href="http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html">Contactable</a> (jQuery Plugin) By <a href="http://theodin.co.uk/">Philip Beel</a>, After enabling this plugin visit <a href="options-general.php?page=magic-contact.php">the options page</a> to configure settings of sending mail.
Version: 0.1
Author: Hunk
Author URI: http://hunk.com.mx
Copyright 2010 Edgar G (email : ing.edgar@gmail.com)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
register_activation_hook( dirname(__FILE__) . '/main.php', 'magic_contact_activate' );
function magic_contact_activate(){
if(!get_option('init_contact')){
update_option( 'recipient_contact', get_bloginfo('admin_email') );
update_option( 'subject_contact', 'A contactable message' );
update_option( 'label_name_contact', 'Name' );
update_option( 'label_email_contact', 'E-Mail' );
update_option( 'label_website_contact', 'Website' );
update_option( 'label_feedback_contact', 'Your Message' );
update_option( 'label_send_contact', 'SEND' );
update_option( 'recievedMsg_contact', 'Thank you for your message' );
update_option( 'notRecievedMsg_contact', 'Sorry, your message could not be sent, try again later' );
update_option( 'disclaimer_contact', 'Please feel free to get in touch, we value your feedback' );
update_option( 'hide_email_contact', 'false' );
update_option( 'hide_website_contact', 'false' );
update_option( 'init_contact', 1 );
}
}
// Add action links
add_action('plugin_action_links_' . plugin_basename(__FILE__), 'AddPluginActions');
function AddPluginActions($links) {
$new_links = array();
$new_links[] = '<a href="options-general.php?page=magic-contact.php">' . __('Settings') . '</a>';
return array_merge($new_links, $links);
}
add_action('admin_menu', 'mc_admin_actions');
function mc_admin_actions(){
add_options_page("Magic Contact", "Magic Contact", 'manage_options',"magic-contact.php", "magic_contact_menu");
}
function magic_contact_menu(){
if ( isset($_POST['submit']) ) {
if ( function_exists('current_user_can') && !current_user_can('manage_options') )
die(__('Cheatin’ uh?'));
update_option( 'recipient_contact', $_POST['recipient_contact'] );
update_option( 'subject_contact', $_POST['subject_contact'] );
update_option( 'label_name_contact', $_POST['label_name_contact'] );
update_option( 'label_email_contact', $_POST['label_email_contact'] );
update_option( 'label_website_contact', $_POST['label_website_contact'] );
update_option( 'label_feedback_contact', $_POST['label_feedback_contact'] );
update_option( 'label_send_contact', $_POST['label_send_contact'] );
update_option( 'recievedMsg_contact', $_POST['recievedMsg_contact'] );
update_option( 'notRecievedMsg_contact', $_POST['notRecievedMsg_contact'] );
update_option( 'disclaimer_contact', $_POST['disclaimer_contact'] );
if ( isset( $_POST['hide_email_contact'] ) ) update_option( 'hide_email_contact', 'true' ); else update_option( 'hide_email_contact', 'false' );
if ( isset( $_POST['hide_website_contact'] ) ) update_option( 'hide_website_contact', 'true' ); else update_option( 'hide_website_contact', 'false' );
}
include 'form-admin.php';
}
add_action('template_redirect', 'script_magic_contact');
function script_magic_contact(){
$base = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
wp_enqueue_script( 'jquery.contactable', $base . 'contactable/jquery.contactable.js', array('jquery') , 3.1);
wp_enqueue_script( 'jquery.validate', $base . 'contactable/jquery.validate.pack.js', array('jquery') , 3.1);
wp_enqueue_script( 'my_contactable', $base . 'my.contactable.php', array('jquery') , 3.1);
wp_enqueue_style( 'contactable', $base . 'contactable/contactable.css' );
}
add_action('wp_footer','div_magic_contact');
function div_magic_contact(){
echo '<div id="mycontactform"> </div>';
}
?>